g5에 지도 넣기입니다.
본문
이 스킨에서 구글지도만 g5에 적용 하려는데 잘 안됩니다. 혹 성공하신 분 계신가요
글쓰기에서
추가 코드
$apikey=$board['bo_1'];
$map_width="640";
$map_height="450";
상단 부분
<tr>
<td class=write_head>지 도</td>
<td>
<div>
<?
if($write[wr_1] != '미사용') {
echo "<input type='radio' id=r1 name='wr_1' value='사용' checked>지도 사용";
echo "<input type='radio' id=r2 name='wr_1' value='미사용'>지도 미사용";
} else {
echo "<input type='radio' id=r1 name='wr_1' value='사용'>지도 사용";
echo "<input type='radio' id=r2 name='wr_1' value='미사용' checked>지도 미사용";
}
?>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=false&language=ko"></script>
<?
if ($write['wr_9']=='') $write['wr_9']='37.566535';
if ($write['wr_10']=='') $write['wr_10']='126.977969';
?>
<script type="text/javascript">
// 구글지도
var map;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
function initialize() {
var latlng = new google.maps.LatLng(<?=$write['wr_9']?>, <?=$write['wr_10']?>);
var myOptions = {
zoom: 12,
scaleControl: true,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
// 리스너 Listener ////////////////////////////////////////////////////
google.maps.event.addListener(map, 'zoom_changed', function() {
document.getElementById("zoom_level").innerHTML = map.getZoom();
zoomLevel = map.getZoom();
if (zoomLevel > 19) {
map.setZoom(19);
}
if (zoomLevel < 1) {
map.setZoom(1);
}
});
setupEvents();
centerChanged();
}
function setupEvents() {
reverseGeocodedLast = new Date();
centerChangedLast = new Date();
setInterval(function() {
if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
reverseGeocode();
}
}, 1000);
google.maps.event.addListener(map, 'center_changed', centerChanged);
google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
map.setZoom(map.getZoom() + 1);
});
}
function getCenterLatLngText() {
var nn = 1000000;
var tmpLat = Math.round(map.getCenter().lat()*nn)/nn;
var tmpLng = Math.round(map.getCenter().lng()*nn)/nn;
document.fwrite.wr_9.value = tmpLat;
document.fwrite.wr_10.value = tmpLng;
return tmpLat +', '+ tmpLng;
}
function centerChanged() {
centerChangedLast = new Date();
var latlng = getCenterLatLngText();
document.getElementById('latlng').innerHTML = latlng;
document.getElementById('formatedAddress').innerHTML = '';
currentReverseGeocodeResponse = null;
}
function reverseGeocode() {
reverseGeocodedLast = new Date();
geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
}
function reverseGeocodeResult(results, status) {
currentReverseGeocodeResponse = results;
if(status == 'OK') {
if(results.length == 0) {
document.getElementById('formatedAddress').innerHTML = 'None';
} else {
document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
}
} else {
document.getElementById('formatedAddress').innerHTML = 'Error';
}
}
function geocode() {
var address = document.getElementById("address").value;
geocoder.geocode({
'address': address,
'partialmatch': true}, geocodeResult);
}
function geocodeResult(results, status) {
if (status == 'OK' && results.length > 0) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert("Info: " + status);
}
}
</script>
Find Place: <input type="text" id="address" size="40" onKeyDown="if(event.keyCode==13){geocode();}" />
<input type="button" style = "cursor: pointer;" value=" Go " onclick="geocode()">
<div id="map">
<div id="map_canvas" style="width:<?=$map_width?>; height:<?=$map_height?>;"></div>
<div id="crosshair"></div>
</div>
<table>
<tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr>
<tr><td>Address:</td><td><div id="formatedAddress"></div></td></tr>
<tr><td>Zoom:</td><td><div id="zoom_level">12</div></td></tr>
</table>
</td>
</tr>
중앙부분
<!-- 구글지도 보기 -->
<script type="text/javascript">
// window.onload 스크립트 실행
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(initialize);
</script>
하단에 위와 같이 했는데 안되네요.
아시는 분...좀...
답변 2
맵캔버스가 가로 세로 부분에 px가 누락되었네요
width:<?=$map_width?>px; height:<?=$map_height?>px
이렇게 넣어주세요
감사 감사합니다. 어찌해서 글쓰기에 보여지는 부분까지 했습니다.
근데 보기view에 나오지 않습니다. 좀 부탁드립니다.
상단
$apikey=$board['bo_1'];
$map_width="530";
$map_height="270";
중앙
<? if ($view['wr_1'] == "사용") { ?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ko"></script>
<script type="text/javascript">
// 구글맵
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(<?=$write['wr_9']?>, <?=$write['wr_10']?>);
var myOptions = {
zoom: 16,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// 리스너 Listener ////////////////////////////////////////////////////
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
if (zoomLevel > 19) {
map.setZoom(19);
}
if (zoomLevel < 1) {
map.setZoom(1);
}
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Here"
});
}
</script>
<div id="map_canvas" style="width:<?=$map_width?>; height:<?=$map_height?>;">
</div>
<? }?>
하단
<script language="JavaScript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function resizeImage(func) {
resizeBoardImage(<?=(int)$board[bo_image_width] + 40 ?>);
drawFont();
}
addLoadEvent(resizeImage);
//<!-- 게시글 보기 끝 -->
//<!-- 구글지도 보기 -->
addLoadEvent(initialize);
</script>
이것을
<div id="map_canvas" style="width:<?=$map_width?>; height:<?=$map_height?>;">
이렇게 해도 안보입니다.
<div id="map_canvas" style="width:<?=$map_width?>px; height:<?=$map_height?>px;">
실제 소스가 돌아가는 곳이 있어야 에러 확인이 가능할 것 같습니다
일반적으로 지도가 안뜨는건 좌표 오류일 가능성이 큽니다
네 g4에서 적용하면 됩니다.
그럼 어디를 수정해야 할지요.
게시판에 지도를 넣어 aa업소위치 bb업소위치 이런식으로 해야 하는데...
혹 다른 방법이라도 아시면 좀. 글쓰는 것은 운영자가 아니라 이용자입니다.
