본문 바로가기

IT/Google

"Google Map API" 구글맵 마커 + 말풍선 - v2

by 910F 2016. 9. 12.

Google Map API 를 이용한 말풍선 및 마커 샘플 예제입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title> Google map </title>
    </head>

<body onload="onLoad();">

<script src="http://maps.google.com/maps?file=api&v=2&hl=en&key=" type="text/javascript"></script>
    <script type="text/javascript">
        var gmarkers = [];
        var htmls = []; 
        // global "map" variable
        var map; 
        // This function picks up the side_bar click and opens the corresponding info window
        function myclick(i) {  
            gmarkers[i].openInfoWindowHtml(htmls[i]);
        } 
        // This function zooms in or out
        // its not necessary to check for out of range zoom numbers, because the API checks
        function myzoom(a) {  
            map.setZoom(map.getZoom() + a);
        } 
        function onLoad() { 
            if (GBrowserIsCompatible()) {   // this variable will collect the html which will eventualkly be placed in the side_bar
                  
                var side_bar_html = "";  
                var i = 0;   
                var baseIcon = new GIcon();  
                baseIcon.iconSize = new GSize(15, 24);  
                baseIcon.shadowSize = new GSize(24, 24);  
                baseIcon.iconAnchor = new GPoint(0, 12);  
                baseIcon.infoWindowAnchor = new GPoint(12, 0);   
                var martini = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_gray.png", null);   //var martini = new GIcon(baseIcon, "/img/hotel/check.png", null, "/img/hotel/check.png");
                   
                function createMarker(point, html, icon) {
                    var marker = new GMarker(point, icon);
                    GEvent.addListener(marker, "click", function() {  
                        marker.openInfoWindowHtml(html);
                    });
                    return marker;  
                }     // create the map using the global "map" variable
                  
                map = new GMap2(document.getElementById("map"));  
                map.addControl(new GOverviewMapControl());  
                map.addControl(new GLargeMapControl());  
                map.addControl(new GMapTypeControl());  
                map.addControl(new GScaleControl());  
                map.enableDoubleClickZoom();  
                map.setCenter(new GLatLng(37.55544, 127.07590), 15, G_NORMAL_MAP);   //Map Type : G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP by Ribbie
                    // add the points
                  
                var point = new GLatLng(37.55544, 127.07590);  
                var marker = createMarker(point, "<div align='left' style='font-size:12px;width:300px;'>군자동 주민센터</div>", martini)   map.addOverlay(marker);    
            } 
            else {  
                alert("Sorry, the Google Maps API is not compatible with this browser");
            }   
        } // end of onLoad function
    </script>

<div id="map" style="width:450px; height: 300px"></div>

</body>

</html>

저작자표시 변경금지 (새창열림)

'IT > Google' 카테고리의 다른 글

"Google Map API" 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) (0)	2016.09.13
"Google Map API" 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 (2)	2016.09.13
"Google Map API" 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 (0)	2016.09.13
"Google API" Geocode - 주소로 위경도 검색 v3 (0)	2016.09.13
"Google API" Geocode - 구글 맵 위경도 검색 v2 (0)	2016.09.12

티스토리툴바