개요
이 튜토리얼에서는 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, lng 및 type과 같은 지도의 마커 특성을 포함하는 테이블을 만듭니다.
id 특성은 기본 키 역할을 하며 type 특성은 레스토랑과 술집을 구별합니다.
테이블의 저장 공간을 최소한으로 유지하려면 lat 및 lng 특성을 부동 소수점 크기 (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_query 및 mysql_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('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$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()로 명명합니다. 해당 함수는 다음 두 매개변수를 사용합니다.
url은 데이터베이스가 변경될 때 XML 파일을 동적으로 업데이트할지 여부에 따라 XML 파일에 대한 경로 또는 XML 파일을 생성하는 PHP 스크립트에 대한 경로를 지정합니다. 이 튜토리얼에서 이 지도는 마커 데이터에 대한 정적 XML 파일을 호출합니다.
일반적으로 파일 이름으로 참조할 수 있도록 이 XML 파일을 HTML 파일과 동일한 디렉토리에 두는 것이 가장 쉬운 방법입니다.-
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'
}
};
마커 및 정보 창 만들기
마커를 만들 때 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 함수를 호출합니다. 이 함수는 모든 마커 요소를 반복하고 각 마커 요소의 name, address, type 및 latLng 특성을 검색합니다.
그런 다음 코드에서 마커를 만들고 지도에 마커를 추가하고 정보 창을 각 마커에 바인딩하여 클릭 시 설명을 표시합니다.
추가 정보
자신의 위치 데이터를 사용하여 지도에 마커를 그리려는 경우, 일괄 지오코딩 서비스를 사용하여 주소를 마커의 위도와 경도로 변환할 수 있습니다.
도움이 필요하시나요? 지원 페이지