구글맵 주소로 불러오기
글쓰기에서 wr_1을 주소입력이라고 하면
스킨의 view.skin.php에서 지도 출력할부분에
아래 스크립트 넣으시고
<script src="https://maps.googleapis.com/maps/api/js?key=구글키&libraries=places&callback=initAutocomplete" async defer></script>
<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 15, // 지도를 띄웠을 때의 줌 크기
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), // div의 id과 값이 같아야 함. "map-canvas"
mapOptions);
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));
// Geocoding *****************************************************
var address = '<?=$view[wr_1]?>'; // DB에서 주소 가져와서 검색하거나 왼쪽과 같이 주소를 바로 코딩.
var marker = null;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
icon: image, // 마커로 사용할 이미지(변수)
title: '<?=$view[wr_subject]?>', // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
position: results[0].geometry.location
});
var content = "<font color=#000000><b><?=$view[wr_subject]?><br/><br/>찾으시는 위치입니다</b></font>"; // 말풍선 안에 들어갈 내용
// 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
var infowindow = new google.maps.InfoWindow({ content: content});
google.maps.event.addListener(marker, "click", function() {infowindow.open(map,marker);});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
// Geocoding // *****************************************************
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 100%; height: 500px" title="<?=$view[wr_subject]?> 위치입니다."></div>
body 부분에 넣으시면 됩니다
<body onload="initialize()" onunload="GUnload()" style="margin:0px;">
허접하지만 도움이 되시길 ...
댓글 6개
감사드려요..