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 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <title>Maps Project</title> <style> #map-canvas { width: 500px; height: 400px; background-color: #CCC; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapCanvas = document.getElementById('map-canvas'); var myLatlng = new google.maps.LatLng(35.1466317,129.0596543); // 위경도 설정 var mapOptions = { // 구글 맵 옵션 center: myLatlng, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP }; // 구글 맵 생성 var map = new google.maps.Map(mapCanvas, mapOptions); var contentString = '<div style="width:100px;height:50px;">SSM</div>'; // 말풍선 내용 var infowindow = new google.maps.InfoWindow({ content: contentString, size: new google.maps.Size(200,100) }); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable:true, // 마커 드래그 가능 title: 'Hello World!' // 마커 : 도움말 풍선(마우스 오버 시) }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); if (marker.getAnimation() != null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> |