첨부파일 :
map.htm출처 : http://zero-gravity.tistory.com/154
↓ <head>와 </head>사이에 넣는다.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
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 | <!-- GoogoleMap Asynchronously Loading the API ********************************************* --><script type="text/javascript"> function initialize() { var mapLocation = new google.maps.LatLng('36.322473', '127.412501'); // 지도에서 가운데로 위치할 위도와 경도 var markLocation = new google.maps.LatLng('36.322473', '127.412501'); // 마커가 위치할 위도와 경도 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; // 마커로 사용할 이미지의 세로 크기 // 마커로 사용할 이미지 주소 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: '서대전네거리역이지롱~' // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀 }); var content = "이곳은 서대전네거리역이다! <br/> 지하철 타러 가자~"; // 말풍선 안에 들어갈 내용 // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~ 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> |
[출처] 구글 지도 API 사용하기 기초 (google map api)|작성자 호야호야
//위치 검색하기
위치를 검색할 때, 위도와 경도로 찾게 되면 항상 미국 구글맵에 들어가서 위치를 검색한 다음에 위도와 경도를 알아내서 직접 기입해야 하는 수밖에 없는데... 이번 글에서는 그런 불편을 없애기 위해 위도/경도가 아닌 주소로 바로 검색하는 방법을 사용하려 한다.
이 방법을 찾게 된 이유는 DB에 있는 수 십개의 업체들을 웹상에 지도로 표시해야 하는데 위도/경도 컬럼을 만들어서 일일히 업데이트 하는 게 지옥이었기 때문이다. 그래서 주소 컬럼을 이용해서 업체의 주소를 가져와 바로 검색할 수 있는 방법을 찾게 됐다. 구글맵API에서는 이걸 지오코딩이라고 부른다.
전에도 말했지만 방법은 어렵지 않다.
※ 참고한 곳 ※
https://developers.google.com/maps/documentation/javascript/geocoding?hl=ko
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple?hl=ko
참고했던 사이트를 보면, 구글에서는 주소 검색을 사용자가 직접 입력해 검색하는 방식으로 예제를 보여주는데, 아래 내가 한 방식은 미리 주소를 코딩해놓는 방식이다.
먼저 html doctype을 <!DOCTYPE html>로 변경해준 다음,
head 부분에
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
추가해준다.
그리고..
↓ head에 삽입
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 | <!-- GoogoleMap Asynchronously Loading the API ********************************************* --><script type="text/javascript"> function initialize() { var mapOptions = { zoom: 18, // 지도를 띄웠을 때의 줌 크기 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)); // Geocoding ***************************************************** var address = '대전광역시 중구 한밭도서관길 222'; // DB에서 주소 가져와서 검색하거나 왼쪽과 같이 주소를 바로 코딩. var marker = null; var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { 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 = "한밭도서관<br/><br/>Tel: 042-580-4114"; // 말풍선 안에 들어갈 내용 // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~ 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); } }); // Geocoding // ***************************************************** } google.maps.event.addDomListener(window, 'load', initialize);</script> |
↓body 안에 삽입
1 | <div id="map-canvas" style="width: 100%; height: 340px" title="도서관 위치입니다."></div> |
끝~!
'프로그래밍 > JavaScript' 카테고리의 다른 글
| base64 스크립트 암호화/복호화 (0) | 2014.03.03 |
|---|---|
| 구글맵에 파라미터 넘기기 (0) | 2013.10.08 |
| 구글맵 사용법 (0) | 2013.09.10 |
| 팝업창에서 이미지 확대/축소시 해당 팝업창의 크기도 같이 조절하는 코드 (0) | 2013.08.29 |
| javascript 롤링(배너등) (0) | 2013.08.19 |
