구글지도/구글맵(Google Map) 기본소스코드
마스터욱
0
69
0
0
2019-05-18 05:26:32
카카오 지도에 비해, 구글지도키 발급방법은 정말 까다롭습니다.
그리고 가장 중요한 핵심포인트는 GPS 기능을 사용하기 위해서는 자바스크립트 맵키가 아닌, 지오코딩키를 발급받아야 한다는 점이다.
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 | <div id="map-canvas" style="height:300px;"></div> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=구글지오코딩키&libraries=places"></script> <script> var mapOptions = { zoom: 14, // 지도를 띄웠을 때의 줌 크기 mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), // div의 id과 값이 같아야 함. "map-canvas" mapOptions); var size_x = 40; // 마커로 사용할 이미지의 가로 크기 var size_y = 40; // 마커로 사용할 이미지의 세로 크기 // 마커로 사용할 이미지 주소 var image = new google.maps.MarkerImage( '마커주소', new google.maps.Size(size_x, size_y), '', '', new google.maps.Size(size_x, size_y)); // 주소-좌표 변환 객체를 생성합니다 var geocoder = new google.maps.Geocoder(); // 주소로 좌표를 검색합니다 geocoder.geocode( { 'address': "주소"}, function(results, status) { console.log(results); if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); marker = new google.maps.Marker({ map: map, icon: image, // 마커로 사용할 이미지(변수) //title: '', // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀 position: results[0].geometry.location }); /* var content = ""; // 말풍선 안에 들어갈 내용 // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~ var infowindow = new google.maps.InfoWindow({ content: content}); google.maps.event.addListener(marker, "click", function() {infowindow.open(map,marker);}); */ } else { alert("Geocode was not successful for the following reason: " + status); } }); </script> | cs |