Add Simple Marker(Google Map API Javascript V3)
3:12 AM
Kali ini akan ditunjukkan bagaimana menambahkan marker atau pushpin pada map yang menggunakan google map javascript api v3. Sebenarnya untuk data yang banyak dan supaya lebih dinamis, penambahan marker dilakukan dengan menggunakan fusion table atau SQL layer, tetapi untuk pengetahuan awal kali ini yang akan dibahas hanyalah menambahkan simple marker yang disertai info window nya.<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=input your key here4&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
//mengatur settingan map yang ditampilkan
var mapOptions = {
center: new google.maps.LatLng(-6.230771,106.867057),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//buat map
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
//buat info window
var isiinfowindow='ini STIS bro';
var infowindow=new google.maps.InfoWindow({
content:isiinfowindow
});
//buat marker
var marker=new google.maps.Marker({
//set posisi marker
position:new google.maps.LatLng(-6.230771,106.867057),
title:"STIS",
//menambahkan marker ke map
map:map
});
//event listener ketika marker di click
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Penjelasan dari source code diatas dapat dilihat pada comment yang terdapat di dalamnya.
2 comments
mas, kalo mau nambah marker lebih dari 1 gimana caranya ya? mohon bantuan.
ReplyDeletesaya sudah coba copy perintahnya, tapi ga bisa juga nambah. mohon pencerahan untuk tugas saya mas..
mau berapa marker emangnya mas?
Deletekalo banyak pake database enaknya, ke sql gitu. .
kalo cuma 2 coba dicopy aja tapi nama markernya dibedain. .