PHP 구글맵(Google Maps JavaScript API v3) 주소로 검색하기 - Geocoding
페이지 정보
본문
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>구글맵(Google Maps JavaScript API v3) 적용, 위치 표시와 말풍선 띄우기</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<?php
$address = "서울시 구로구 디지털로 242";
$address_title = "해피정닷컴";
$xml = simplexml_load_file("http://maps.google.com/maps/api/geocode/xml?address=".urlencode($address)."&language=ko&sensor=false");
$lat = $xml->result->geometry->location->lat;
$lng = $xml->result->geometry->location->lng;
// php.ini 설정중 allow_url_fopen = On 확인 / Off 이면 추출안됨
//echo "lat = ". $lat ."<br>";
//echo "lng = ". $lng ."<br>";
?>
<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript">
function initialize() {
var mapLocation = new google.maps.LatLng('<?php echo $lat; ?>', '<?php echo $lng; ?>'); // 지도에서 가운데로 위치할 위도와 경도
var markLocation = new google.maps.LatLng('<?php echo $lat; ?>', '<?php echo $lng; ?>'); // 마커가 위치할 위도와 경도
var mapOptions = {
center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
zoom: 15, // 지도를 띄웠을 때의 줌 크기 , 숫자가 클수록 상세지도
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // div의 id과 값이 같아야 함. "map-canvas"
var size_x = 40; // 마커로 사용할 이미지의 가로 크기
var size_y = 40; // 마커로 사용할 이미지의 세로 크기
// 마커로 사용할 이미지 주소
var image = new google.maps.MarkerImage( '',
new google.maps.Size(size_x, size_y),
'',
'',
new google.maps.Size(size_x, size_y));
var marker;
marker = new google.maps.Marker({
position: markLocation, // 마커가 위치할 위도와 경도(변수)
map: map,
icon: image, // 마커로 사용할 이미지(변수)
// info: '말풍선 안에 들어갈 내용',
title: '<?php echo $address_title; ?>' // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
});
var content = "<?php echo $address_title; ?>"; // 말풍선 안에 들어갈 내용
// 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
var infowindow = new google.maps.InfoWindow({ content: content});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 100%; height: 313px" title="<?php echo $address_title; ?>"></div>
</body>
</html>
php.ini 의 설정값중 allow_url_fopen = On 이어야만 $lat , $lng 가 추출된다는 것이 문제일수 있습니다.
호스팅사에 그것이 설정을 못변경해준다고 하는 경우에는 무슨 다른 방법이 있을듯한데...
그것에 대한 해답을 옵션님이 아래와 같이 답변을 주셨습니다. 옵션님 감사합니다.
아래 내용은 테스트후 문제가 없으면 내용에 반영하도록 하겠습니다.
$xml = simplexml_load_file("http://maps.google.com/maps/api/geocode/xml?address=".urlencode($address)."&language=ko&sensor=false");
삭제하고
if(ini_get('allow_url_fopen')) {
$xml = simpleXML_load_file("http://maps.google.com/maps/api/geocode/xml?address=".urlencode($address)."&language=ko&sensor=false");
}else{
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$xml_raw = curl_exec($ch);
$xml = simplexml_load_string($xml_raw);
}
추가하면 됩니다. 단 curl사용이 가능해야합니다
관련자료
http://zero-gravity.tistory.com/154
http://pixabay.com/en/map-pin-vector-illustrator-holder-42871/ ( 마커이미지 무료다운로드 )
https://www.happyjung.com/lecture/1828
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ko
<html lang="ko">
<head>
<meta charset="utf-8">
<title>구글맵(Google Maps JavaScript API v3) 적용, 위치 표시와 말풍선 띄우기</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<?php
$address = "서울시 구로구 디지털로 242";
$address_title = "해피정닷컴";
$xml = simplexml_load_file("http://maps.google.com/maps/api/geocode/xml?address=".urlencode($address)."&language=ko&sensor=false");
$lat = $xml->result->geometry->location->lat;
$lng = $xml->result->geometry->location->lng;
// php.ini 설정중 allow_url_fopen = On 확인 / Off 이면 추출안됨
//echo "lat = ". $lat ."<br>";
//echo "lng = ". $lng ."<br>";
?>
<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript">
function initialize() {
var mapLocation = new google.maps.LatLng('<?php echo $lat; ?>', '<?php echo $lng; ?>'); // 지도에서 가운데로 위치할 위도와 경도
var markLocation = new google.maps.LatLng('<?php echo $lat; ?>', '<?php echo $lng; ?>'); // 마커가 위치할 위도와 경도
var mapOptions = {
center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
zoom: 15, // 지도를 띄웠을 때의 줌 크기 , 숫자가 클수록 상세지도
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // div의 id과 값이 같아야 함. "map-canvas"
var size_x = 40; // 마커로 사용할 이미지의 가로 크기
var size_y = 40; // 마커로 사용할 이미지의 세로 크기
// 마커로 사용할 이미지 주소
var image = new google.maps.MarkerImage( '',
new google.maps.Size(size_x, size_y),
'',
'',
new google.maps.Size(size_x, size_y));
var marker;
marker = new google.maps.Marker({
position: markLocation, // 마커가 위치할 위도와 경도(변수)
map: map,
icon: image, // 마커로 사용할 이미지(변수)
// info: '말풍선 안에 들어갈 내용',
title: '<?php echo $address_title; ?>' // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
});
var content = "<?php echo $address_title; ?>"; // 말풍선 안에 들어갈 내용
// 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
var infowindow = new google.maps.InfoWindow({ content: content});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 100%; height: 313px" title="<?php echo $address_title; ?>"></div>
</body>
</html>
php.ini 의 설정값중 allow_url_fopen = On 이어야만 $lat , $lng 가 추출된다는 것이 문제일수 있습니다.
호스팅사에 그것이 설정을 못변경해준다고 하는 경우에는 무슨 다른 방법이 있을듯한데...
그것에 대한 해답을 옵션님이 아래와 같이 답변을 주셨습니다. 옵션님 감사합니다.
아래 내용은 테스트후 문제가 없으면 내용에 반영하도록 하겠습니다.
$xml = simplexml_load_file("http://maps.google.com/maps/api/geocode/xml?address=".urlencode($address)."&language=ko&sensor=false");
삭제하고
if(ini_get('allow_url_fopen')) {
$xml = simpleXML_load_file("http://maps.google.com/maps/api/geocode/xml?address=".urlencode($address)."&language=ko&sensor=false");
}else{
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$xml_raw = curl_exec($ch);
$xml = simplexml_load_string($xml_raw);
}
추가하면 됩니다. 단 curl사용이 가능해야합니다
관련자료
http://zero-gravity.tistory.com/154
http://pixabay.com/en/map-pin-vector-illustrator-holder-42871/ ( 마커이미지 무료다운로드 )
https://www.happyjung.com/lecture/1828
https://developers.google.com/maps/documentation/javascript/tutorial?hl=ko
댓글목록
등록된 댓글이 없습니다.