오늘 :
3,648 / 74,810
어제 :
3,949 / 104,837
전체 :
7,602,199 / 241,940,830

Open API 공부

Naver, Daum, Google Open API

cyber
추천 수 : 8 / 0
조회 수 : 16369
2007.11.30 (12:29:07)


http://www.subkorea.com/api/google/MapsAPI/icon-custom.htm마크표시 변경 (연번), 콘트롤, 지도버튼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Custom Icon</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abc...xyz"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());

        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        var baseIcon = new GIcon();
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);

        // Creates a marker whose info window displays the letter corresponding
        // to the given index.
        function createMarker(point, index) {
          // Create a lettered icon for this point using our icon class
          var letter = String.fromCharCode("A".charCodeAt(0) + index);
          var letteredIcon = new GIcon(baseIcon);
          letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

          // Set up our GMarkerOptions object
          markerOptions = { icon:letteredIcon };
          var marker = new GMarker(point, markerOptions);

          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
          });
          return marker;
        }

        // Add 10 markers to the map at random locations
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 10; i++) {
          var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
          map.addOverlay(createMarker(latlng, i));
        }
      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

번호 제목 닉네임 등록일 조회 추천
Selected icon-custom 첨부 파일
cyber
2007-11-30 16369 8
21 icon-simple 첨부 파일
cyber
2007-11-30 14618 14
20 marker-drag 첨부 파일
cyber
2007-11-30 16460 8
19 marker-simple 첨부 파일
cyber
2007-11-30 16080 10
18 control-localsearch 첨부 파일
cyber
2007-11-30 19780 4
17 control-custom 첨부 파일
cyber
2007-11-30 16519 11
16 control-positioning 첨부 파일
cyber
2007-11-30 18767 11
15 control-simple 첨부 파일
cyber
2007-11-30 16944 17
14 event-mouseover 첨부 파일
cyber
2007-11-30 16548 15
13 event-removal 첨부 파일
cyber
2007-11-30 16178 16
Tag List