Membuat Simple Marker Google Map API

Simple icon marker google maps

Setelah ulasan sebelumnya mengenai pembuatan simple map, maka pada kesempatan kali ini saya ingin berbagi mengenai pembuatan marker pada google map api. Berikut codenya :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-7.8730414,110.4242874);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'ini lokasi saya'
  });
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Langkah kerjanya :
  1. Copy lalu paste code di atas pada text editor seperti notepad.exe
  2. Simpan menggunakan tipe file *.html
  3. Koordinat yang saya blok berwarna biru dapat diganti sesuai koordinat wilayah yang ingin anda tampilkan
  4. Begitu pula "title" dapat diganti sesuai keinginan, misalnya; 'rumah saya', atau 'sekolah saya'
Demikian sedikit tulisan saya mengenai simple marker. Apabila anda ingin merubah icon marker dapat dilihat pada artikel tentang Kustomisasi Icon Marker. Selamat mencoba...
Previous
Next Post »
Thanks for your comment