개발

[javascript] 구글맵 API

지승준 2014. 6. 18. 18:17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
var map;
var marker;
var parliament = new google.maps.LatLng(37.4551505,127.1271482); //좌표
 
function initialize() {
    var latlng = new google.maps.LatLng(37.4551505,127.1271482); //좌표
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
    marker = new google.maps.Marker({ 
        map: map, 
        draggable: true,     //위치변경여부
        title: "제목"
        animation: google.maps.Animation.DROP, 
        position: parliament
    });
 
    var content = "말풍선 안에 들어갈 내용"// 말풍선 안에 들어갈 내용
         
    // 마커를 클릭했을 때의 이벤트
    var infowindow = new google.maps.InfoWindow({ contentcontent});
    
    //페이지 로딩시 말풍선 실행
    infowindow.open(map,marker);
    
    //마커 클릭시 말풍선 실행
    google.maps.event.addListener(marker, 'click'function() {
        infowindow.open(map,marker);
    });
}
 
$(document).ready(function (e) {
    initialize();
});
 
<div id="map_canvas"></div>
cs