Cara Membuat Custom Marker Google Maps

Cara Membuat Custom Marker Google Maps - Kali ini kita belajar cara mengganti Marker map atau custom marker yang dalam Google maps. Marker adalah penanda suatu titik atau koordinat dalam map, jika default marker dari google maps adalah panah seperti tetasan air terbalik kita juga dapat menggantinya atau custom marker kita sendiri dengan gambar yang kita inginkan contoh anda ingin menandai rumah anda dengan bendera anda sendiri di maps. Untuk lebih jelasnya langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps Siapkan sebuah gambar untuk markernya, ukuran jangan terlalu besar agar tidak menghalangi maps, bisa menggunakan ukuran 64x64px atau 32x32px simpan dalam folder Google_maps.

Sebagi contoh disini kami menggunakan gambar ini :

kemudian buat sebuah file HTML dengan nama custom_marker.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      .input {
   height: 25px;
   padding: 2px;
   width: 200px;
      }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #map-canvas { height: 400px; width:100%; }
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:730px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
 <script>
   function initialize() {
     var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(-6.187931, 107.031279)
     }
     var map = new google.maps.Map(document.getElementById('map-canvas'),
           mapOptions);

     var image = 'flag_mark.png';
     var myLatLng = new google.maps.LatLng(-6.187931, 107.031279);
     var homeMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
     });
   }

   google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Custom Marker Google Maps</h1>
  <div id="map-canvas"></div>
 </div>
  </body>
</html>

Perhatikan script berikut :

var image = 'flag_mark.png';
 var myLatLng = new google.maps.LatLng(-6.187931, 107.031279);
 var homeMarker = new google.maps.Marker({
   position: myLatLng,
   map: map,
   icon: image
 });

Var image berisi nama gambar yang anda gunakan atau alamat gambar yang anda gunakan.

Var myLatLng adalah kordinat marker anda.

Var homeMarker berisi pemanggilan objek marker dari google maps dengan settingan position dari var myLatLng dan icon markernya dari var image.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Custom Marker Google Maps di sini : CEK TKP

Custom Marker Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.