Все готово!

Прежде чем приступить к разработке, ознакомьтесь с документацией для разработчиков.

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Использование MySQL и PHP с Google Maps

Обзор

В этом руководстве показано, как отображать информацию из базы данных MySQL на карте Google Мар, используя Google Maps JavaScript API. Оно подходит для людей со средними знаниями MySQL, PHP и XML.

На карте в данном руководстве показаны два вида маркеров, чтобы различать расположение ресторанов и баров соответственно. База данных MySQL хранит информацию о расположении отдельных маркеров, такую как тип места (ресторан или бар), его название, адрес и географические координаты. Карта получает эту информацию из базы данных в файле XML, который выступает посредником между базой данных и картой. Чтобы экспортировать информацию о маркерах из базы данных в файл XML можно использовать инструкции РНР.

Нажмите маркер на карте ниже, чтобы отобразить информационное окно с названием и адресом этого местоположения. Маркеры имеют метки "R" или "B", они показывают местоположения ресторанов и баров соответственно.

В примере ниже приведен полный пример кода, требуемого для создания этой карты.

      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>

Попробуйте сделать это сами

Наведите указатель мыши на верхнюю правую часть блока кода, чтобы скопировать код или открыть его в 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>

Начало работы

Установите и настройте сервер MySQL с РНР на своем компьютере.

Создание таблицы в MySQL

Создайте таблицу в MySQL, содержащую атрибуты маркеров на карте, таких как id, name, address, lat, lng и type.

Атрибут id служит первичным ключом, а атрибут type – для различия ресторанов и баров.

Чтобы сохранять размер для своей таблицы минимальным, можно задавать атрибуты lat и lng как числа с плавающей точкой размером (10,6). Это позволяет полям хранить 6 цифр после десятичного разделителя и 4 цифры до него.

С базой данных MySQL можно взаимодействовать, используя интерфейс phpMyAmin. Представленный ниже снимок экрана показывает настройку таблицы в phpMyAdmin.

Чтобы создать таблицу можно также воспользоваться командами SQL, как например в приведенном ниже инструкции на языке SQL.

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 ;

Заполнение таблицы

Можно импортировать данные маркеров в базу данных SQL при помощи функции "Import" в интерфейсе phpMyAdmin, которая позволяет импортировать данные в разных форматах.

Ниже приведены данные маркеров карты из этого руководства в формате .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

Чтобы импортировать данные маркеров в таблицу SQL можно также пользоваться командами 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');

Вывод данных в формате XML средствами РНР

На данном этапе у вас должна быть таблица под названием markers, содержащая данные маркеров карты. В этом разделе показано, как экспортировать данные таблицы из базы данных SQL в формате XML с помощью инструкций РНР. Карта может использовать файл XML, чтобы получить данные маркеров через асинхронные вызовы JavaScript.

Использование файлов XML как промежуточного звена между базой данных и картой Google обеспечивает более быструю первоначальную загрузку страницы и более широкое применение карты. Оно упрощает отладку, поскольку можно проверить вывод XML независимо от базы данных и выполнить разбор кода JavaScript независимо от XML. Возможен также вариант на основе только статических файлов XML без использования базы данных MySQL.

Если вы никогда не пользовались PHP, чтобы подключиться к базе данных MySQL, посетите php.net и ознакомьтесь с mysql_connect, mysql_select_db, my_sql_query и mysql_error.

Для вывода данных таблицы SQL в формате XML средствами PHP можно действовать любым из трех приведенных ниже способов.

При использовании общедоступного браузера для обращения к базе данных, используя файлы РНР, важно убедиться, что ваши реквизиты базы данных надежно защищены. Для этого заключите информацию о соединении с базой данных в отдельный от основного кода РНР файл. Файл с учетными данными должен выглядеть так, как приведено ниже, но содержать информацию о вашей собственной базе данных.

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

Использование функций PHP DOM XML для вывода в формате XML

Функции DOM XML языка PHP, заботятся о тонкостях, например, о преобразовании особых элементов в XML, и упрощают создание XML с более сложными структурами. Функции DOM XML можно использовать, чтобы создавать узлы XML, добавлять дочерние узлы и выводить документ XML на экран. Чтобы определить, имеется ли у PHP вашего сервера активный функционал DOM XML, проверьте свою конфигурацию или попробуйте запустить domxml_new_doc().

Ниже представлен файл PHP, который выполняет подключение к базе данных MySQL и передает данные XML в браузер.

<?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;

?>

В представленном выше файле, код РНР сначала создает новый документ XML и родительский узел "markers". Затем он подключается к базе данных, исполняет запрос SELECT * (выбрать все) к таблице маркеров и выполняет итерации по всем результатам. Для каждой строки в таблице (каждого местоположения), программный код создает новый узел XML с атрибутами строки как атрибутами XML, а затем добавляет его к родительскому узлу. Оставшаяся часть кода выводит XML на экран браузера.

Примечание. Если ваша база данных содержит международные символы или вам по какой-либо иной причине необходим принудительный вывод UTF-8, при выводе данных можно воспользоваться utf8_encode.

Использование функции PHP echo для вывода в формате XML

Если нет доступа к функциям PHP dom_xml, тогда можно выводить XML с помощью функции echo. Применяйте вспомогательную функцию (например, parseToXML) при использовании функции echo, чтобы корректно кодировать специальные символы (<, >, ", ') по правилам XML.

Ниже представлен файл PHP, который выполняет подключение к базе данных MySQL и передает данные XML в браузер.

<?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>';

?>

Представленный выше код подключается к базе данных и выполняет запрос SELECT * (выбрать все) к таблице маркеров. Затем он выводит родительский узел markers и выполняет итерации по всем результатам запроса. После этого код выводит узел XML для маркера в каждой строке таблицы (для каждого местоположения). При этом поля названия и адреса передаются с помощью функции parseToXML, если в них имеются специальные символы. Сценарий завершается выводом закрывающего тега markers.

Примечание. Можно применять utf8_encode к выводу данных XML, если ваша база данных содержит международные символы или по иной причине, требующей вывода в кодировке UTF-8.

Использование функций PHP DOM для вывода в формате XML

Ниже представлен файл PHP, который выполняет подключение к базе данных MySQL и передает данные XML в браузер.

<?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();

?>

Приведенный выше код создает новый документ XML и родительский узел "markers". Затем он подключается к базе данных, исполняет запрос SELECT * (выбрать все) к таблице маркеров и выполняет итерации по всем результатам. Для каждой строки в таблице (для каждого местоположения) программный код создает новый узел XML с атрибутами строки как атрибутами XML, а затем добавляет его к родительскому узлу. Затем он выводит XML на экран браузера.

Примечание. Если ваша база данных содержит международные символы, а также когда вам необходим принудительный вывод UTF-8, при выводе данных можно воспользоваться utf8_encode.

Проверка вывода XML

Чтобы подтвердить, что сценарий PHP создает допустимые данные XML, вызовите созданный вами файл сценария php из браузера, чтобы увидеть вывод в формате XML, как показано ниже.

<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>

Если браузер не отображает выводимые из базы данных сведения в формате XML, попробуйте выполнить отладку путем удаления строки в файле, которая устанавливает в заголовке тип содержимого text/xml. Эта строка может привести к тому, что ваш браузер попытается выполнить разбор XML и затруднит просмотр сообщений отладки.

Создание карты

В этом разделе показано, как разработать пример карты из данного руководства средствами JavaScrip, а затем вывести его в файл XML. Подробнее об азах создания карты Google см. документацию.

Создайте новый файл в текстовом редакторе и сохраните его как index.html. Для понимания программного кода, который можно добавить в этот файл, ознакомьтесь со следующими разделами.

Загрузка файла XML

Чтобы загрузить файл XML на страницу, воспользуйтесь преимуществами объекта XMLHttpRequest, предоставляемого браузером. Этот объект позволяет получать файл, который расположен в том же домене, что и запрашивающая его веб-страница, и является основой программирования "AJAX".

Определите собственную функцию для загрузки файла и назовите ее downloadUrl(). Функция принимает два следующих параметра.

  1. url – указывает путь либо к файлу XML, либо к сценарию PHP, который генерирует файл, в зависимости от того, хотите ли вы динамически обновлять файл XML, когда в базу данных вносятся изменения. Карта в данном руководстве вызывает статический файл XML для получения данных о маркерах.
    Как правило, проще всего хранить этот файл XML в той же папке, что и файл HTML, для того чтобы ссылаться на него по имени.
  2. callback – указывает функции, что при возвращении XML в JavaScript вызывается сценарий.

Приведенный ниже код показывает объявление этой функции.

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);
}

Примечание. Поскольку запрос XMLHttpRequest является асинхронным, функция обратного вызова запускает функцию downloadURL с учетом размера файла XML. Чем больше файл XML, тем больше времени это может занять. По этой причине лучше всего не писать никакой код после downloadUrl, которая полагается на маркеры внутри функции обратного вызова. Вместо этого, такой код можно прописать внутри функции обратного вызова.

Теперь, когда функция определена, ее можно вызвать из кода, передавая в нее имя своего файла РНР и функцию обратного вызова. Карта в данном руководстве для получения данных о маркерах вызывает статический файл XML, как в приведенном ниже программном коде.


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
    });

Создание настраиваемых маркеров

Приведенный ниже код показывает, как добавить настраиваемые метки для своих маркеров. Для этого сначала необходимо создать ассоциированный массив. Он ассоциирует ваши метки со строками type типа маркера: restaurant или bar. Это упрощает обращение к меткам при создании маркеров из файла XML.

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

Создание маркеров и информационных окон

При создании маркеров их метки можно извлечь, используя type как ключ ассоциированного массива customLabel. Переопределите свойство .label как свойство конструктора google.maps.Marker.

Затем создайте HTML-код, который вы хотите применить в информационном окне, сочетающий название, адрес и теги HTML чтобы выделить название.

Если вы храните описания в формате HTML в базе данных, возможно, вам придется преобразовывать символы HTML и быть привязанными к такому выводу в формате HTML. В то время, пока идет извлечение каждого атрибута отдельно в JavaScript, можно попробовать разные варианты разметки HTML на стороне клиента и быстро предварительно просмотреть новое форматирование.

После построения строки HTML, представленный ниже код добавляет блок прослушивания событий к маркеру, который отображает информационное окно при нажатии.

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

Окончательная компоновка

Откройте в браузере файл index.html. При загрузке страницы, функция initMap настраивает карту и вызывает функцию downloadUrl. Эта функция выполняет итерацию по всем элементам маркеров и извлекает название, адрес, тип и географические координаты для каждого маркера.
Затем код создает маркеры, добавляет их на карту, привязывает информационное окно к каждому маркеру, чтобы отображать описание при нажатии.

Дополнительная информация

Если вы хотите отобразить маркеры на карте, используя собственные данные местоположений, можно использовать службу пакетного геокодирования, чтобы преобразовать адреса своих маркеров в значения широты и долготы.

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.