|
|
| 16번째 줄: |
16번째 줄: |
| | ---- | | ---- |
| | <html> | | <html> |
| − | <head> | + | <iframe width="96%" height="800px" src="http://redint.info/geo/JoseungdangPlace.htm"></iframe> |
| − | <meta charset="utf-8">
| + | <br/> |
| − | <title>다른 이미지로 마커 생성하기</title>
| + | <input type="button" value="확대보기" onclick="location.href='http://redint.info/geo/JoseungdangPlace.htm'"> |
| − |
| |
| − | </head>
| |
| − | <body>
| |
| − | <div id="map" style="width:100%;height:350px;"></div>
| |
| − | | |
| − | <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=89916f622dee27781f9dd08224b875a1"></script>
| |
| − | <script> | |
| − | var mapContainer = document.getElementById('map'), // 지도를 표시할 div
| |
| − | mapOption = {
| |
| − | center: new kakao.maps.LatLng(36.67859, 128.89978), // 지도의 중심좌표
| |
| − | level: 4 // 지도의 확대 레벨
| |
| − | };
| |
| − | | |
| − | var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
| |
| − | | |
| − | var imageSrc = 'http://redint.info/images/placeholder_village_red.png', // 마커이미지의 주소입니다
| |
| − | imageSize = new kakao.maps.Size(46, 62), // 마커이미지의 크기입니다
| |
| − | imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
| |
| − |
| |
| − | // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
| |
| − | var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
| |
| − | markerPosition = new kakao.maps.LatLng(36.67859, 128.89978); // 마커가 표시될 위치입니다
| |
| − | | |
| − | // 마커를 생성합니다
| |
| − | var marker = new kakao.maps.Marker({
| |
| − | position: markerPosition,
| |
| − | image: markerImage // 마커이미지 설정
| |
| − | });
| |
| − | | |
| − | // 마커가 지도 위에 표시되도록 설정합니다
| |
| − | marker.setMap(map);
| |
| − | </script>
| |
| − | </body>
| |
| | </html> | | </html> |
| − | | + | <br /><br /> |
| − | <br/><br/> | |
| | | | |
| | ===요산'''腰山'''=== | | ===요산'''腰山'''=== |