Tutorial Membuat GOOGLE MAPS API #1

Hello elpeople, kali ini kami akan share tentang tutorial bagaimana sih cara untuk membuat peta di script html, ini merupakan tutorial dasar dalam pembuatan peta google maps yang nanti bisa kita custome sesuai keinginan kita nanti. lets do it,,,

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,   
       zoomControl: false,   
       mapTypeControl: false,   
       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":"#ebe3cd"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#523735"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f1e6"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#c9b2a6"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#dcd2be"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ae9e90"}]},{"featureType":"administrative.neighborhood","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#93817c"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#c9e7a1"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#447530"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#f5f1e6"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#fdfcf8"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#f8c967"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#e9bc62"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#e98d58"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#db8555"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#806b63"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"transit.line","elementType":"labels.text.fill","stylers":[{"color":"#8f7d77"}]},{"featureType":"transit.line","elementType":"labels.text.stroke","stylers":[{"color":"#ebe3cd"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#7ec5fe"}]},{"featureType":"water","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#7ec5fe"}]}]   
      };   
      // 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 isimap = new google.maps.Map(mapElement, mapOptions);   
  }

Jika ada pertanyaan untuk penjelasan script yang tidak dimengerti, bisa bertanya di kolom komentar!! Terimakasih,, happy coding!! :)

Download File Lengkap