Tutorial Membuat GOOGLE MAPS API #2


Hello elpeople, saya akan melanjutkan membuat icon marker dan menambahkan ke dalam peta.

Kita hanya membutuhkan 2 file ini, peta.html, map.js, dan plugin tambahan dari google maps javascript.

1. peta.html
 <!DOCTYPE html>    
  <html>    
  <head>    
   <title>Simple Map</title>    
   <style>    
  html, body {    
   height: 100%;    
   margin: 0;    
   padding: 0;    
   }    
   #map {    
   height: 100%;    
   }    
   </style>    
  </head>    
  <body>    
   <div id="map"></div>    
   <script type="text/javascript"    
    src="http://maps.google.com/maps/api/js?sensor=false&libraries=places,visualization&key=AIzaSyBcgp9U9kqpa904ZaX8gsNYN3vojI2BfCE"></script>    
   <script type="text/javascript" src="map.js"></script>    
  </body>    
  </html>    

2. map.js
 // membuat loading fungsi pertama ketika halaman selesai di load    
    google.maps.event.addDomListener(window, 'load', init);    
    function init() {    
    // Basic options for a simple Google Map    
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions    
    var mapOptions = {    
     // How zoomed in you want the map to start at (always required)    
     zoom: 5,  //besar zoom in out  
     zoomControl: false,  //tombol zoom di peta false/true = hide/show  
     mapTypeControl: false, //pilihan tombol type peta    
     scaleControl: false,    
     streetViewControl: false,    
     rotateControl: false,    
     // The latitude and longitude to center the map (always required)    
     center: new google.maps.LatLng(0.656732, 113.951602), // Long Lat Indonesia    
     //https://mapstyle.withgoogle.com/ membuat style peta agar bagus   
     styles:   
     [{"elementType":"geometry","stylers":[{"color":"#1d2c4d"}]},{"elementType":"labels","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#8ec3b9"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#1a3646"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"administrative.land_parcel","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#64779e"}]},{"featureType":"administrative.neighborhood","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"color":"#334e87"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#023e58"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#283d6a"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#6f9ba5"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#023e58"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#3C7680"}]},{"featureType":"road","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#304a7d"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2c6675"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#255763"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#b0d5ce"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#023e58"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"transit.line","elementType":"geometry.fill","stylers":[{"color":"#283d6a"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#3a4762"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#0e1626"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#4e6d70"}]}]  
    };    
    // Get the HTML DOM element that will contain your map    
    // We are using a div with id="map" seen below in the <body>    
     var mapElement = document.getElementById('map');    
     // Create the Google Map using our element and options defined above    
     var mapkpi = new google.maps.Map(mapElement, mapOptions);  
     var markerNode = new google.maps.Marker({  
     position: new google.maps.LatLng (0.656732, 113.951602),  
     map: mapkpi,  
     animation: google.maps.Animation.BOUNCE,  
     icon: 'marker.ico',  
     title: 'Posisi Ku'  
     });  
  }   

Jika ada pertanyaan untuk penjelasan script yang tidak dimengerti, bisa bertanya di kolom komentar!! Terimakasih,, happy coding!! :)
Download File Lengkap
Previous
Next Post »