<div class="map_cnt" id="map_open">
<div class="map_box">
<div class="map_tltbox">
<div class="map_tltcont">
<span id="map_tltcont_name">대연점</span>
<a href="#close" class="map_close">X</a>
</div>
</div>
<div class="map_cont">
<div id="map-canvas" style="width: 100%;height:400px;"></div>
<!-- <img src="/share/img/map.jpg" alt="지도" width="100%"> -->
</div>
</div>
</div>
<script type="text/javascript">
</script>
<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyBC54YWLZJavk-9IAJAMEMU-hocEeEAet0"></script>
<script type="text/javascript">
var map_x = "";
var map_y = "";
var map_wr_1 = "";
var map_wr_subject = "";
$(function() {
$(".td_branch_name a.fsch_btn").click(function() {
var map_c = $(this).attr('id').split('__');
var map_xy = map_c[0].split(',');
map_x = map_xy[0];
map_y = map_xy[1];
map_wr_1 = map_c[1];
map_wr_subject = map_c[2];
initialize(map_x,map_y,map_wr_1,map_wr_subject);
$("#map_tltcont_name").html(map_wr_1);
});
});
function initialize(map_x,map_y,map_wr_1,map_wr_subject) {
var mapLocation = new google.maps.LatLng(map_x, map_y); // 지도에서 가운데로 위치할 위도와 경도
var markLocation = new google.maps.LatLng(map_x, map_y); // 마커가 위치할 위도와 경도
var mapOptions = {
center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
zoom: 18, // 지도 zoom단계
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), // id: map-canvas, body에 있는 div태그의 id와 같아야 함
mapOptions);
var size_x = 60; // 마커로 사용할 이미지의 가로 크기
var size_y = 60; // 마커로 사용할 이미지의 세로 크기
// 마커로 사용할 이미지 주소
var image = new google.maps.MarkerImage( 'http://www.larva.re.kr/home/img/boximage3.png',
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: map_wr_1 // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
});
var content = "이곳이 "+map_wr_subject+" 입니다 ^^"; // 말풍선 안에 들어갈 내용
// 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
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>
'progarm_old > [PHP]' 카테고리의 다른 글
네이버 검색 api를 사용 (0) | 2017.09.11 |
---|---|
php (없애기) (0) | 2017.08.02 |
[google] 구글맵 지도 작업 (0) | 2017.07.19 |
날짜~ 살아온 일수 구하기 (0) | 2017.03.17 |
현재 URL 비교하여 찾기 (0) | 2016.10.20 |