tutorialswb

TutorialsWB hadir sebagai wadah bagi teman-teman yang ingin "Belajar PHP Dasar". Sehingga kami yakin bahwa TutorialsWB akan menjadi Pusat "Belajar Bahasa Pemrograman PHP" Disamping PHP website ini menyediakan berbagai tips dan trik Blogger. Kami menerima Pemasangan iklan banner atau artikel.

Hubungi Saya

3 Langkah Memasukkan Google Maps Kedalam Website



Apakah anda pernah melihat google maps pada sebuah website? Kami rasa mereke embed dari google maps atau bagi yang expert hanya mengambil atitide dan longitude-nya.

Bagi seorang web developer yang telah expert mereka tidak embed alamat website merek dari google mapsnya langsung, tetapi mereka hanya mengambil Atitude dan Longitude kemudian dimasukkan kedalam database mereka dan mereka tampilkan kedalam website mereka.

Tetapi bagi kalian dan kami yang belum expert hal seperti itu sangat susah dilakukan, Tapi tenang saja kami mempunyai solusinya, dimana kalian hanya melakukan 3 langkah untuk memasukkan google maps kedalam website kalian.

Tetapi sebelum kita memulai kita haru membuat form terlebih dahulu, form ini sebagai tempat menyimpan google maps yang telah kita embed. Form dibawah kami beri nama index.html

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary"><center>Cara Memasukkan Google Maps Kedalam Website</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <br /><br />
  <!--Tempat Google Maps Embed-->

  <!--Google Maps Ended-->
 </div>

</body> 
</html> 

1. Silahkan klik link berikut https://www.embedgooglemap.net/

Kemudian anda masukkan alamat anda, untuk lebih detail silahkan lihat gambar dibawah.

cara memasukkan google maps kedalam website
Setelah anda menemukan details alamat anda silahkan klik button Get HTML-Code, lihat gambar yang kami ber nimor 2.

2. Copy url yang anda dapatkan setelah anda menekan button pada nomor 2, untuk detailnya silahkan lihat gambar dibawah.

cara memasukkan google maps kedalam aplikasi


3. Pasang kedalam website atau form yang telah kita buat di atas.

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid">
   <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
  </div>
 </nav>
 <div class="col-md-3"></div>
 <div class="col-md-6 well">
  <h3 class="text-primary"><center>Cara Memasukkan Google Maps Kedalam Website</center></h3>
  <hr style="border-top:1px dotted #ccc;"/>
  <br /><br />
  <!--Tempat Google Maps Embed-->
  <center>
   <div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="400" id="gmap_canvas" src="https://maps.google.com/maps?q=Malino&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div><style>.mapouter{text-align:right;height:500px;width:600px;}.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:600px;}</style></div>
  </center>
  <!--Google Maps Ended-->
 </div>

</body> 
</html> 

Selesai.. Jika klaian ingin melihat hasil dari apa yang kami share di atas silahkan klik button demo dibawah ini.


Sekian share kalia ini semoga apa yang kami share di atas bermanfaat bagi anda, Jangan lupa tinggalkan komentar dan mulai berdiskusi dengan kami.



Baca Juga

closed