모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

Google 지도에서 MySQL 및 PHP 사용

개요

이 튜토리얼에서는 Google Maps JavaScript API를 사용하여 Google 지도에서 MySQL 데이터베이스의 정보를 표시하는 방법을 보여줍니다. 이 튜토리얼은 MySQL, PHP 및 XML에 대한 중간 수준의 지식을 가진 사람을 대상으로 합니다.

이 튜토리얼의 지도에는 레스토랑과 술집의 위치를 각각 구분하는 두 종류의 마커가 표시됩니다. MySQL 데이터베이스는 장소 유형(레스토랑 또는 술집), 이름, 주소 및 지리 좌표와 같은 개별 마커 위치에 대한 정보를 저장합니다. 지도는 데이터베이스와 지도 사이의 중개자 역할을 하는 XML 파일을 통해 데이터베이스에서 이 정보를 검색합니다. PHP 문을 사용하여 데이터베이스의 마커 정보를 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>

시작하기

시스템에 PHP와 MySQL 서버를 설치, 설정 및 구성합니다.

MySQL에서 테이블 만들기

MySQL에서 마커 id, name, address, lat, lngtype과 같은 지도의 마커 특성을 포함하는 테이블을 만듭니다.

id 특성은 기본 키 역할을 하며 type 특성은 레스토랑과 술집을 구별합니다.

테이블의 저장 공간을 최소한으로 유지하려면 latlng 특성을 부동 소수점 크기 (10,6)으로 지정할 수 있습니다. 이를 통해 필드는 소수점 뒤에 6자리와 소수점 앞에 최대 4자리를 저장할 수 있습니다.

phpMyAmin 인터페이스를 통해 MySQL 데이터베이스와 상호작용할 수 있습니다. 아래 스크린샷은 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 ;

테이블 채우기

다양한 형식의 데이터를 가져올 수 있는 phpMyAdmin 인터페이스의 'Import'기능을 사용하여 마커 데이터를 SQL 데이터베이스로 가져올 수 있습니다.

다음은 이 튜토리얼의 지도에 대한 .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');

PHP를 사용하여 XML로 데이터 출력

이때 지도 마커 데이터가 포함된 markers라는 테이블이 있어야 합니다. 이 섹션에서는 PHP 문을 사용하여 SQL 데이터베이스의 테이블 데이터를 XML 형식으로 내보내는 방법을 보여줍니다. 지도는 XML 파일을 사용하여 비동기 JavaScript 호출을 통해 마커 데이터를 검색할 수 있습니다.

XML 파일을 데이터베이스와 Google 지도 사이의 중개자로 사용하면 초기 페이지가 훨씬 빨리 로드되고 지도 애플리케이션의 유연성이 훨씬 강화됩니다. 그리고 데이터베이스의 XML 출력과 XML의 JavaScript 구문 분석을 독립적으로 확인할 수 있으므로 훨씬 쉽게 디버깅할 수 있습니다. 또한 정적 XML 파일만을 기반으로 지도를 실행하고 MySQL 데이터베이스는 사용하지 않을 수 있습니다.

PHP를 사용하여 MySQL 데이터베이스에 연결한 적이 없는 경우 php.net에 있는 mysql_connect, mysql_select_db, my_sql_querymysql_error를 참조하세요.

다음은 PHP를 통해 SQL 테이블 데이터를 XML로 출력할 수 있는 3가지 방법입니다.

공용 브라우저에서 PHP 파일을 사용하여 데이터베이스에 액세스할 때 데이터베이스 인증서의 보안을 보장해야 합니다. 이를 위해 데이터베이스 연결 정보를 메인 PHP 코드와는 별개인 PHP 파일에 배치할 수 있습니다. 인증서가 있는 파일은 아래와 같이 보이지만 자체 데이터베이스 정보를 포함합니다.

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

PHP의 DOM XML 함수를 사용하여 XML 출력

PHP의 DOM XML 함수는 XML의 특수 엔터티를 이스케이프하는 등의 정교한 작업을 처리하고 훨씬 복잡한 구조의 XML을 쉽게 만들 수 있습니다. DOM XML 함수를 사용하여 XML 노드를 만들고, 자식 노드를 추가하고, XML 문서를 화면에 출력할 수 있습니다. 서버의 PHP에 DOM XML 기능이 활성화되어 있는지 확인하려면 구성을 확인하거나 domxml_new_doc()를 초기화합니다.

다음은 MySQL 데이터베이스에 연결하고 XML을 브라우저에 덤프하는 PHP 파일입니다.

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

?>

위의 파일에서 PHP 코드는 먼저 새 XML 문서를 초기화하고 "markers" 부모 노드를 만듭니다. 그런 다음 데이터베이스에 연결하고 마커 테이블에서 SELECT *(모두 선택) 쿼리를 실행하고 그 결과를 반복합니다. 코드는 행 특성을 XML 특성으로 사용하여 테이블의 각 행(각 위치)에 대한 새 XML 노드를 만들어 부모 노드에 추가합니다. 그런 다음 코드의 마지막 부분에서 XML을 브라우저 화면에 덤프합니다.

참고: 데이터베이스에 국제 문자가 포함되어 있거나 UTF-8로 출력해야 하는 경우 데이터 출력에 utf8_encode를 사용할 수 있습니다.

PHP의 echo를 사용하여 XML 출력

PHP의 dom_xml 함수에 대한 액세스 권한이 없는 경우 echo 함수를 사용하여 XML을 출력할 수 있습니다. echo 함수를 사용하여 몇몇 특수 엔터티(<,>,",')를 XML에서 식별 가능하도록 올바르게 인코딩하려면 도우미 함수(예: parseToXML)를 사용합니다.

다음은 MySQL 데이터베이스에 연결하고 XML을 브라우저에 덤프하는 PHP 파일입니다.

<?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 노드를 echo하여 쿼리 결과를 반복합니다. 그런 다음 이 코드는 테이블의 각 행의 마커(각 위치)에 대한 XML 노드를 echo합니다. 이때 특수 엔터티가 있는 경우 parseToXML 함수를 통해 이름과 주소 필드를 보냅니다. 스크립트는 닫는 markers 태그를 echo out하여 끝납니다.

참고: 데이터베이스에 국제 문자가 포함되어 있거나 UTF-8로 출력해야 하는 경우 XML 데이터 출력에 utf8_encode를 사용할 수 있습니다.

PHP의 DOM 함수를 사용하여 XML 출력

다음은 MySQL 데이터베이스에 연결하고 XML을 브라우저에 덤프하는 PHP 파일입니다.

<?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을 구문 분석하고 디버깅 메시지를 보는 것을 어렵게 만들 수 있습니다.

지도 만들기

이 섹션에서는 JavaScript 및 출력 XML 파일을 사용하여 이 튜토리얼의 지도 예시를 개발하는 방법을 보여줍니다. Google 지도 만들기 기본 사항에 대한 자세한 내용은 해당 문서를 참조하세요.

텍스트 편집기에서 새 파일을 만들어 index.html로 저장합니다. 이 파일에 추가 할 수 있는 코드를 이해하려면 다음 섹션을 읽어보세요.

XML 파일 로드

XML 파일을 페이지에 로드하려면 브라우저에서 제공하는 XMLHttpRequest 객체를 활용하면 됩니다. 이 객체는 요청하는 웹페이지와 동일한 도메인에 있는 파일을 검색하는 데 도움이 되며 "AJAX" 프로그래밍의 기초입니다.

파일을 로드하기 위한 함수를 정의하고 downloadUrl()로 명명합니다. 해당 함수는 다음 두 매개변수를 사용합니다.

  1. url은 데이터베이스가 변경될 때 XML 파일을 동적으로 업데이트할지 여부에 따라 XML 파일에 대한 경로 또는 XML 파일을 생성하는 PHP 스크립트에 대한 경로를 지정합니다. 이 튜토리얼에서 이 지도는 마커 데이터에 대한 정적 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는 비동기식이므로 콜백 함수는 XML 파일의 크기를 기반으로 downloadURL 함수를 시작합니다. XML 파일이 클수록 더 오래 걸릴 수 있습니다. 이러한 이유로 콜백 함수 내부의 마커에 의존하는 downloadUrl 다음에 코드를 삽입하지 않는 것이 가장 좋습니다. 대신 해당 코드를 콜백 함수 안에 넣을 수 있습니다.

이제 함수를 정의했으므로 코드에서 함수를 호출하고 PHP 파일 이름과 콜백 함수를 전달할 수 있습니다. 이 튜토리얼에서 지도는 아래 코드와 같이 마커 데이터에 대한 정적 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'
  }
};

마커 및 정보 창 만들기

마커를 만들 때 typecustomLabel 관련 배열의 키로 사용하여 적절한 마커 레이블을 검색할 수 있습니다. .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 함수를 호출합니다. 이 함수는 모든 마커 요소를 반복하고 각 마커 요소의 name, address, type 및 latLng 특성을 검색합니다.
그런 다음 코드에서 마커를 만들고 지도에 마커를 추가하고 정보 창을 각 마커에 바인딩하여 클릭 시 설명을 표시합니다.

추가 정보

자신의 위치 데이터를 사용하여 지도에 마커를 그리려는 경우, 일괄 지오코딩 서비스를 사용하여 주소를 마커의 위도와 경도로 변환할 수 있습니다.

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.