Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Custom Save Widget

Read the documentation or view this example full screen.

/*
 * This sample uses a custom control to display the SaveWidget. Custom
 * controls can be used in place of the default Info Window to create a
 * custom UI.
 * This sample uses a Place ID to reference Google Sydney. Place IDs are
 * stable values that uniquely reference a place on a Google Map and are
 * documented in detail at:
 * https://developers.google.com/maps/documentation/javascript/places#placeid
 */

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {lat: -33.8666, lng: 151.1958},
    mapTypeControlOptions: {
      mapTypeIds: [
        'roadmap',
        'satellite'
      ],
      position: google.maps.ControlPosition.BOTTOM_LEFT
    }
  });

  var widgetDiv = document.getElementById('save-widget');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

  // Append a Save Control to the existing save-widget div.
  var saveWidget = new google.maps.SaveWidget(widgetDiv, {
    place: {
      // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
      placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
      location: {lat: -33.866647, lng: 151.195886}
    },
    attribution: {
      source: 'Google Maps JavaScript API',
      webUrl: 'https://developers.google.com/maps/'
    }
  });

  var marker = new google.maps.Marker({
    map: map,
    position: saveWidget.getPlace().location
  });
}
<div id="map"></div>
<div id="save-widget">
  <strong>Google Sydney</strong>
  <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
      Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
      "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
      baristas.</p>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#save-widget {
  width: 300px;
  box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
  background-color: white;
  padding: 10px;
  font-family: Roboto, Arial;
  font-size: 13px;
  margin: 15px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&signed_in=true&callback=initMap">
</script>

Cobalah sendiri

Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Save Widget</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #save-widget {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="save-widget">
      <strong>Google Sydney</strong>
      <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
          Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
          "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
          baristas.</p>
    </div>
    <script>
      /*
       * This sample uses a custom control to display the SaveWidget. Custom
       * controls can be used in place of the default Info Window to create a
       * custom UI.
       * This sample uses a Place ID to reference Google Sydney. Place IDs are
       * stable values that uniquely reference a place on a Google Map and are
       * documented in detail at:
       * https://developers.google.com/maps/documentation/javascript/places#placeid
       */

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958},
          mapTypeControlOptions: {
            mapTypeIds: [
              'roadmap',
              'satellite'
            ],
            position: google.maps.ControlPosition.BOTTOM_LEFT
          }
        });

        var widgetDiv = document.getElementById('save-widget');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

        // Append a Save Control to the existing save-widget div.
        var saveWidget = new google.maps.SaveWidget(widgetDiv, {
          place: {
            // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: {lat: -33.866647, lng: 151.195886}
          },
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        var marker = new google.maps.Marker({
          map: map,
          position: saveWidget.getPlace().location
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.