그누보드 [G4] 구글 지도 API 연동 PHP 소스
페이지 정보
본문
Google Maps Javascript API V3 적용된 것입니다.
API key 가 없이 적용할수 있습니다.
지도에 사용될 주소가 저장될 필드 변수만 적절하게 변경하시면 됩니다.
지도에 사용될 주소가 저장될 필드 변수만 적절하게 변경하시면 됩니다.
jQuery CDN 다운로드가 필요합니다.
다운로드 : http://docs.jquery.com/Downloading_jQuery
최신버전 : jquery-1.7.2.min.js ( Minified version ) / jquery-1.4.2.min.js 도 잘 작동합니다.
최신버전 : jquery-1.7.2.min.js ( Minified version ) / jquery-1.4.2.min.js 도 잘 작동합니다.
1. 글쓰기
<?php
$api_map_address = $write["wr_9"];
?>
<input size="50" name="wr_9" id="api_map_address" itemname="지도삽입 주소" value="<?php echo $api_map_address; ?>" class="tx">
<a href="javascript:win_google_map()" class="button"><span>Google 지도확인</span></a>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" charset='UTF-8'></script>
<script type="text/javascript">
<!--
function google_map(mapid, addr) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': addr }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById(mapid), {
zoom: 15,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({map: map, position: map.getCenter()});
}
});
}
function win_google_map() {
$("#dialog-map").dialog({
width: 550,
autoOpen: false,
//modal: true,
resizable: false,
buttons: {
"Colse": function () {
$(this).dialog("close");
}
}
});
$("#dialog-map").dialog("open");
$("#google-map").css("display", "block");
$("#google-map").html("");
google_map("google-map", $("#api_map_address").val());
}
//-->
</script>
<div id="dialog-map" class="dialog-content">
<div id="google-map" style="border:1px solid #999; width:500px; height:300px; margin:10px; display:none;"></div>
</div>
2. 글 보기
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<?php
?>
$api_map_address = $view["wr_9"];
if ($api_map_address != "") {?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
<!--
function google_map(mapid, addr) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': addr }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById(mapid), {
zoom: 15,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({map: map, position: map.getCenter()});
}
});
}
$(document).ready(function () {
google_map("google_map", "<?php echo addslashes($api_map_address); ?>");
});
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
<tr><td bgcolor="#ffffff"><div id="google_map" style="width:100%; height:300px; border:1px solid #ccc; margin:0 0 0px 0;"></div></td></tr>
</table></td></tr>
</table></td></tr>
</table>
댓글목록
등록된 댓글이 없습니다.