Menampilkan Peta Google Map Pertama di Halaman Website Sendiri


 Sebelumnya kita sudah mengetahui cara mendaftar di google map agar mendapatkar API Key. Sehingga dengan API Key ini, kita bisa mengkoneksi data yang kita punya dengan aplikasi google map.  Sekarang kita buat file HTML yang berisi perintah pemetaan standar google MAP. File HTML tersebut kita tempat didalam folder atau didalam folder web yang kita punya. Isi file HTML adalah perintah perintah Javascript dengan formatnya umumnya ditempatkan diantara perintah <head> </head>yang ditandai dengan perintah .

Untuk memulainya adalah perhatikan gambar peta yang ada di bawah ini, yaitu peta. Dari foto tersebut koordinat yang akan kita tandai, adalah 5.134714,95.712890 .

googlemap1

Program javascript adalah ada 2 bagian, yaitu bagian API Key dan koordinat. Program API Key google adalah :

http://maps.googleapis.com/maps/api/js?key=####kode%20API%20Key######&sensor=false

Program Koordinat adalah
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(5.134714,95.712890),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”)
,mapProp);
}
google.maps.event.addDomListener(window, ‘load’, initialize);

Setelah sintak script diatas kita buat, sekarang tambahkan sintak lagi untuk yang berguna untuk menampilkan peta, yaitu :

 

Maka program lengkapnya adalah

<!DOCTYPE html>
<html>
<head>
http://maps.googleapis.com/maps/api/js?key=####kode%20API%20Key######&sensor=false

function initialize()
{
var mapProp = {
center:new google.maps.LatLng(5.134714,95.712890),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”),
mapProp);
}

google.maps.event.addDomListener(window,’load’,initialize);

</head>

<body>

</body>
</html>

Isi HTML ini disimpan dengan nama map_first.php. Bila dijalankan di web browser makan petanya akan tampil seperti gambar dibawah ini

googlemap2

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s