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.
Berikut Source code dari map yang ada di website ini simple marker




<!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.

Enhanced by Zemanta

You Might Also Like

2 comments

  1. mas, kalo mau nambah marker lebih dari 1 gimana caranya ya? mohon bantuan.
    saya sudah coba copy perintahnya, tapi ga bisa juga nambah. mohon pencerahan untuk tugas saya mas..

    ReplyDelete
    Replies
    1. mau berapa marker emangnya mas?
      kalo banyak pake database enaknya, ke sql gitu. .

      kalo cuma 2 coba dicopy aja tapi nama markernya dibedain. .

      Delete