Google MapsTMで遊んでみよう！

最終更新日 2007/11/10
【地図上にアイコンを表示する】
　地図上に予め作成済みの画像データをアイコンとして表示する方法を示した例です。影(shadow)のアイコンを少しずらして配置することでアイコンが少し浮かび上がったような効果も得られます。
ブラウザで「ソースの表示」を行うとこの見本のJAVAScriptを読むことができます。
 
【説明】
   先ほどのマーカーはGoogleが用意している形状ですが、この例では任意の影付きアイコンを地図上にランダムに配置しておき、マーカーがクリックされた場合には、InfoWindowを開いてその中に画像データを表示します。当然、地図上に配置するアイコンは場所ごとに違った形を置くことができますし、InfoWindow内にはHTMLとして文字も画像も表示することができます。

 //<![CDATA[
   function load() {
      if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map"));
         map.addControl(new GLargeMapControl());
         map.addControl(new GMapTypeControl());
         map.addControl(new GScaleControl());
         map.setCenter(new GLatLng(34.94097,135.765953), 13);
      // map.setMapType(G_HYBRID_MAP);
         var icon = new GIcon();
         icon.image = "http://www.neo-tech-lab.co.uk/GoogleMaps.files/panoramio-marker.png";
         icon.shadow = "http://www.neo-tech-lab.co.uk/GoogleMaps.files/panoramio-shadow.png";
         icon.iconSize = new GSize(18, 20);
         icon.shadowSize = new GSize(22, 20);
         icon.iconAnchor = new GPoint(6, 20);
         icon.infoWindowAnchor = new GPoint(5, 1);
         function createMarker(point, number) {
            var marker = new GMarker(point, icon);
            GEvent.addListener(marker, "click", function() {
               marker.openInfoWindowHtml("Marker #<b>" + number + "</b><br><img src =\"http://www.neo-tech-lab.co.uk/GoogleMaps.files/hamster.jpg">");
            });
            return marker;
         }
         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 < 25; i++) {
            var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
            map.addOverlay(createMarker(point, i+1));
         }
      }
   }
//]]>