[google] 구글 지도 대박 스크립트로 이게 되네요.

<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>