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

Menggunakan MySQL dan PHP dengan Google Maps

Ringkasan

Tutorial ini memperlihatkan cara menampilkan informasi dari database MySQL di peta Google menggunakan Google Maps JavaScript API. Tutorial ini sesuai untuk orang yang sudah memiliki pengetahuan menengah tentang MySQL, PHP, dan XML.

Peta di tutorial ini menampilkan dua jenis marker untuk membedakan antara lokasi restoran dengan bar. Sebuah database dalam MySQL menyimpan informasi tentang lokasi marker individual seperti tipe tempat (apakah berupa restoran atau bar), nama, alamat, dan koordinat geografisnya. Peta mengambil informasi ini dari database, melalui file XML yang berfungsi sebagai perantara antara database dengan peta. Anda bisa menggunakan pernyataan PHP untuk mengekspor informasi marker dari database ke file XML.

Klik marker pada peta di bawah ini untuk menampilkan jendela info dengan nama dan alamat lokasi. Marker memiliki label 'R' atau 'B' dan menampilkan lokasi restoran dan bar.

Contoh berikut menampilkan keseluruhan kode yang Anda perlukan untuk membuat peta ini.

      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
<div id="map"></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;
}
 <!-- 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&callback=initMap">
</script>

Cobalah sendiri

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

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <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;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Memulai

Pasang, siapkan, dan konfigurasi server MySQL dengan PHP di komputer Anda.

Membuat tabel di MySQL

Buat sebuah tabel di MySQL yang berisi atribut marker pada peta, seperti id, name, address, lat, lng, dan type marker.

Atribut id berfungsi sebagai kunci utama dan atribut type membedakan restoran dengan bar.

Untuk meminimalkan ruang penyimpanan untuk tabel, Anda bisa menetapkan atribut lat dan lng agar berupa float ukuran (10,6). Ini memungkinkan bidang untuk menyimpan 6 digit setelah desimal, ditambah maksimum 4 digit sebelum desimal.

Anda bisa berinteraksi dengan database MySQL melalui antarmuka phpMyAmin. Tangkapan layar di bawah ini menampilkan persiapan tabel di phpMyAdmin.

Anda juga bisa menggunakan perintah SQL untuk membuat tabel, seperti dalam pernyataan SQL di bawah ini.

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Mengisi tabel

Anda bisa mengimpor data marker ke dalam database SQL menggunakan fungsionalitas 'Import' di antarmuka phpMyAdmin yang memungkinkan Anda mengimpor data dalam beragam format.

Di bawah ini adalah data marker untuk peta di tutorial ini, dalam format .csv.

Love.Fish,"580 Darling Street, Rozelle, NSW",-33.861034,151.171936,restaurant
Young Henrys,"76 Wilford Street, Newtown, NSW",-33.898113,151.174469,bar
Hunter Gatherer,"Greenwood Plaza, 36 Blue St, North Sydney NSW ",-33.840282,151.207474,bar
The Potting Shed,"7A, 2 Huntley Street, Alexandria, NSW",-33.910751,151.194168,bar
Nomad,"16 Foster Street, Surry Hills, NSW",-33.879917,151.210449,bar
Three Blue Ducks,"43 Macpherson Street, Bronte, NSW",-33.906357,151.263763,restaurant
Single Origin Roasters,"60-64 Reservoir Street, Surry Hills, NSW",-33.881123,151.209656,restaurant
Red Lantern,"60 Riley Street, Darlinghurst, NSW",-33.874737,151.215530,restaurant

Anda juga bisa menggunakan perintah SQL di bawah ini untuk mengimpor data marker ke dalam tabel SQL.

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Love.Fish', '580 Darling Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Young Henrys', '76 Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Hunter Gatherer', 'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Potting Shed', '7A, 2 Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Nomad', '16 Foster Street, Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Three Blue Ducks', '43 Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Single Origin Roasters', '60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Red Lantern', '60 Riley Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

Mengeluarkan data sebagai XML menggunakan PHP

Pada tahap ini, Anda seharusnya memiliki tabel yang bernama markers yang berisi data marker peta. Bagian ini menampilkan cara mengekspor data tabel dari database SQL ke dalam format XML, menggunakan pernyataan PHP. Peta bisa menggunakan file XML untuk mengambil data marker melalui panggilan JavaScript asinkron.

Menggunakan file XML sebagai perantara database dengan peta Google Anda memungkinkan pemuatan laman awal yang lebih cepat dan aplikasi peta yang lebih fleksibel. Ini membuat debugging lebih mudah karena Anda bisa memverifikasi keluaran XML dari database dan parsing JavaScript XML secara independen. Anda juga bisa menjalankan peta seluruhnya hanya berdasarkan file XML statis dan tidak menggunakan database MySQL.

Jika Anda belum pernah menggunakan PHP untuk terhubung ke database MySQL, kunjungi php.net dan baca tentang mysql_connect, mysql_select_db, my_sql_query, danmysql_error.

Anda bisa menggunakan mana pun dari ketiga teknik yang berbeda di bawah ini untuk mengeluarkan data tabel SQL sebagai XML dengan PHP.

Saat menggunakan browser publik untuk mengakses database menggunakan file PHP, penting untuk memastikan kredensial database Anda aman. Anda bisa melakukannya dengan menempatkan informasi koneksi database Anda di file PHP terpisah dari kode PHP utama. File yang berisi kredensial Anda harus tampak seperti yang di bawah ini, tetapi berisi informasi database Anda sendiri.

<?php
$username="username";
$password="password";
$database="username-databaseName";
?>

Menggunakan fungsi XML DOM PHP untuk mengeluarkan XML

Fungsi XML DOM PHP akan mengelola detail kecil, seperti meloloskan entitas khusus di XML, dan memudahkan pembuatan XML dengan struktur yang lebih kompleks. Anda bisa menggunakan fungsi XML DOM untuk membuat simpul XML, menambah simpul turunan, dan membuat keluaran dokumen XML ke layar. Untuk mengetahui apakah PHP server Anda telah mengaktifkan fungsionalitas XML DOM, periksa konfigurasi atau coba mulai domxml_new_doc().

Di bawah ini adalah file PHP yang dihubungkan ke database MySQL dan mengeluarkan XML ke browser.

<?php
require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $doc->create_element("marker");
  $newnode = $parnode->append_child($node);

  $newnode->set_attribute("name", $row['name']);
  $newnode->set_attribute("address", $row['address']);
  $newnode->set_attribute("lat", $row['lat']);
  $newnode->set_attribute("lng", $row['lng']);
  $newnode->set_attribute("type", $row['type']);
}

$xmlfile = $doc->dump_mem();
echo $xmlfile;

?>

Dalam file di atas, kode PHP melakukan inisialisasi dokumen XML baru terlebih dulu dan membuat simpul induk "marker". Simpul ini kemudian terhubung ke database, mengeksekusi kueri SELECT * (pilih semua) pada tabel marker dan melakukan iterasi pada hasilnya. Untuk setiap baris dalam tabel (setiap lokasi), kode membuat simpul XML baru dengan atribut baris sebagai atribut XML dan menambahkannya ke simpul induk. Bagian terakhir kode kemudian mengeluarkan XML ke layar browser.

Catatan: Jika database Anda berisi karakter internasional, atau Anda perlu memaksakan keluaran UTF-8, Anda bisa menggunakan utf8_encode pada keluaran data.

Menggunakan echo PHP untuk mengeluarkan XML

Jika tidak memiliki akses ke fungsi dom_xml PHP, Anda bisa membuat keluaran XML dengan fungsi echo. Gunakan fungsi helper (misalnya parseToXML) saat menggunakan fungsi echo saja untuk mengenkode beberapa entitas khusus (<,>,",') dengan benar agar ramah XML.

Di bawah ini adalah file PHP yang dihubungkan ke database MySQL dan mengeluarkan XML ke browser.

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

Kode di atas menghubungkan database dan mengeksekusi kueri SELECT * (pilih semua) pada tabel marker. Kode kemudian menjalankan echo simpul markers induk dan melakukan iterasi pada hasil kueri. Kode kemudian menjalankan echo simpul XML untuk marker di setiap baris tabel (untuk setiap lokasi). Ini mengirimkan bidang nama dan alamat melalui fungsi parseToXML terlebih dulu, dalam hal terdapat entitas khusus di dalamnya. Skrip diakhiri dengan menjalankan echo yang mengeluarkan tag markers penutup.

Catatan: Anda bisa menggunakan utf8_encode pada keluaran data XML jika database Anda berisi karakter internasional, atau jika Anda ingin memaksakan keluaran UTF-8.

Menggunakan fungsi DOM PHP untuk mengeluarkan XML

Di bawah ini adalah file PHP yang dihubungkan ke database MySQL dan mengeluarkan XML ke browser.

<?php

require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

?>

Kode di atas melakukan inisialisasi dokumen XML baru dan membuat simpul induk "marker". Simpul ini kemudian terhubung ke database, mengeksekusi kueri SELECT * (pilih semua) pada tabel marker dan melakukan iterasi pada hasilnya. Kode kemudian membuat simpul XML untuk setiap baris dalam tabel (untuk setiap lokasi), dengan atribut baris sebagai atribut XML dan menambahkannya ke simpul induk. Kode kemudian mengeluarkan XML ke layar browser.

Catatan: Jika database Anda berisi karakter internasional, atau Anda perlu memaksakan keluaran UTF-8, Anda bisa menggunakan utf8_encode pada keluaran data.

Memeriksa apakah keluaran XML berfungsi.

Untuk mengonfirmasi apakah skrip PHP menghasilkan XML yang valid, panggil file skrip PHP yang Anda buat dari browser untuk melihat keluaran XML seperti berikut.

<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW" lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria, NSW" lat="-33.910751" lng="151.194168" type="bar"/>

<marker name="Nomad" address="16 Foster Street, Surry Hills, NSW" lat="-33.879917" lng="151.210449" type="bar"/>
<marker name="Three Blue Ducks" address="43 Macpherson Street, Bronte, NSW" lat="-33.906357" lng="151.263763" type="restaurant"/>
<marker name="Single Origin Roasters" address="60-64 Reservoir Street, Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/>
<marker name="Red Lantern" address="60 Riley Street, Darlinghurst, NSW" lat="-33.874737" lng="151.215530" type="restaurant"/>
</markers>

Jika browser Anda tidak menampilkan data marker dari database Anda sebagai keluaran XML, coba jalankan debug dengan menghilangkan baris di file yang menyetel header ke tipe materi text/xml. Baris ini bisa menyebabkan browser Anda mencoba mem-parse XML dan menyulitkan Anda melihat pesan debug.

Membuat peta

Bagian ini menampilkan cara mengembangkan contoh peta di tutorial ini menggunakan JavaScript dan file XML keluaran. Baca dokumentasi untuk mengetahui selengkapnya tentang dasar-dasar membuat peta Google.

Buat sebuah file baru dalam editor teks dan simpan sebagai index.html. Bacalah bagian-bagian berikut untuk memahami kode yang bisa Anda tambahkan ke file ini.

Memuat file XML

Untuk memuat file XML ke dalam laman, Anda bisa memanfaatkan objek XMLHttpRequest yang disediakan oleh browser. Objek ini memungkinkan Anda mengambil file yang berada di domain yang sama dengan laman web yang meminta, dan merupakan dasar pemrograman "AJAX".

Definisikan fungsi Anda sendiri untuk memuat file dan memanggil downloadUrl(). Fungsi mengambil dua parameter:

  1. url menetapkan jalur ke file XML atau ke skrip PHP Anda yang membuat file, tergantung pada apakah Anda ingin memperbarui file XML secara dinamis saat database berubah. Peta di tutorial ini memanggil file XML statis untuk data marker.
    Ini biasanya cara yang paling mudah untuk menempatkan file XML ini di dalam direktori yang sama dengan file HTML sehingga Anda bisa mengacu padanya menurut nama file.
  2. callback menunjukkan fungsi yang dipanggil skrip saat XML kembali ke JavaScript.

Kode di bawah ini menampilkan deklarasi fungsi.

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

Catatan: Karena XMLHttpRequest asinkron, fungsi callback memulai fungsi downloadURL berdasarkan ukuran file XML. Semakin besar file XML Anda, semakin lama waktu yang dibutuhkan. Untuk alasan ini, sebaiknya jangan letakkan kode apa pun setelah downloadUrl yang bergantung pada marker di dalam fungsi callback. Sebagai gantinya, kode tersebut bisa dimasukkan di dalam fungsi callback.

Setelah memiliki fungsi yang sudah didefinisikan, Anda bisa memanggilnya dari kode, dengan meneruskan nama file PHP dan fungsi callback Anda. Peta di tutorial ini memanggil file XML statis untuk data marker, seperti dalam kode di bawah.


downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var icon = customLabel[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      label: icon.label
    });

Membuat marker khusus

Kode berikut menampilkan cara menambahkan label khusus untuk marker Anda dengan membuat larik terkait terlebih dulu. Ini mengaitkan label Anda dengan marker string type: restaurant atau bar. Ini memudahkan referensi label saat Anda membuat marker dari file XML.

var customLabel = {
  restaurant: {
    label: 'R'
  },
  bar: {
    label: 'B'
  }
};

Membuat marker dan jendela info

Saat membuat marker, Anda bisa mengambil label marker yang sesuai dengan menggunakan key sebagai kunci untuk larik customLabel yang terkait. Teruskan properti .label sebagai opsi konstruktor google.maps.Marker.

Berikutnya, buat HTML yang ingin Anda tampilkan di jendela info dengan menggabungkan nama, alamat, dan tag HTML untuk menekankan nama.

Jika Anda menyimpan keterangan yang berformat HTML di database, Anda mungkin harus menangani konversi entitas HTML dan terikat pada keluaran HTML tersebut. Dengan menunggu sampai Anda telah mengambil setiap atribut secara terpisah di JavaScript, Anda bebas bermain dengan HTML di sisi klien dan cepat mempratinjau format baru.

Setelah membuat string HTML, kode di bawah menambahkan listener kejadian ke marker yang menampilkan jendela info saat diklik.

marker.addListener('click', function() {
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
});

Menggabungkan semuanya

Buka file index.html di browser. Saat laman dimuat, fungsi initMap mempersiapkan peta, kemudian memanggil fungsi downloadUrl. Fungsi ini menjalankan iterasi pada semua elemen marker dan mengambil atribut nama, alamat, tipe, dan latLng untuk setiap elemen marker.
Kode kemudian membuat marker, menambahkan marker pada peta, dan menggabungkan jendela info ke setiap marker untuk menampilkan keterangan saat diklik.

Informasi selengkapnya

Jika Anda ingin membuat plot marker pada peta menggunakan data lokasi Anda sendiri, Anda bisa menggunakan layanan geocoding batch untuk mengonversi alamat menjadi garis lintang dan garis bujur untuk marker Anda.

Kirim masukan tentang...

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