// 지도 시작
var map;
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.570240099720834, 126.98623541895226)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
// 마커 설정
var iconBase = '../static/img/marker/'; // 마커 이미지 url base
var iconSize = new google.maps.Size(25, 37); // 마커 크기
var iconOriginb = new google.maps.Point(0,0); // 마커 기준점
var iconAnchor = new google.maps.Point(12, 37); // 마커 앵커
// 마커 찍기
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var ooMarker = locations[i];
var myLatLng = new google.maps.LatLng(ooMarker[1], ooMarker[2]);
var image = {
url: iconBase + ooMarker[3] +'.png',
size: iconSize,
origin: iconOriginb,
anchor: iconAnchor
};
// 마커 생성
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: ooMarker[0],
zIndex: i
});
}
}
//////////////// my function ////////////////
// 선택한 위치로 이동, 줌크기 변경 하는 함수
function thouMoveMap(Lat, Lon, Zoomlevel) {
var moveLatLon = new google.maps.LatLng(Lat,Lon);
map.panTo(moveLatLon);
map.setZoom(Zoomlevel);
};
/////////////////
var markers = [
['P2_1', 37.57111627122541,127.0096592801445,'icon_spot_2'],
['N6_2', 37.58042607146447,127.0087281450001,'icon_spot_1'],
['N9_4', 37.58706560275812,127.0057904142446,'icon_spot_1'],
['N9_6', 37.58536127473854,127.0069872159708,'icon_spot_1']
];
---------------
이렇게 구글맵을 만들었구요.
잘 뜹니다!
이제 그 지도를 기반으로 각 페이지마다 지도의 중심위치와 줌 레벨이 달라져야 하는데요.
그래서
각 페이지의 html 끝부분에
<!-- 지도 만드는 js -->
<script src="{{ url_for('static', filename='js/map_init.js') }}"></script>
<!-- // 지도 범위 init -->
<script type="text/javascript">
$(window).load(function() {
thouMoveMap(37.580467,127.007532,13);
});
</script>
이렇게 달아주고
thouMoveMap(37.580467,127.007532,13);
이 값들을 페이지마다 다르게 넣어주었습니다.
extent, include 기능을 이용해 html을 쪼개서 만들었거든요.
map div는 다른 html에 붙어 있구요.
그런데 alert로 어디까지 작동하나 봣는데 항상
panTo에서 멈춥니다.
panTo 앞의 map을 인식 못하는건가요?
어떻게 해결해야 할까요.ㅜ
글쓰기