例−30:GPolygonでメッシュを作る

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>例−30:GPolygonでメッシュを作る</title>
  <script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=[MAPS_API_KEY]"
  type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {

		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(35.677335,139.744613), 5);
		
		//make mesh-polygon rect
		var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        var lngSpan = ne.lng() - sw.lng();
        var latSpan = ne.lat() - sw.lat();
        
        var lngStep = lngSpan/4;
        var latStep = latSpan/4;
        
        var latOffset = lngStep/2;
        var lngOffset = lngStep/2;
        
        var colorList = [
                            "#FF0000"
                           ,"#CC0000"
                           ,"#990000"
                           
                           ,"#00FF00"
                           ,"#00CC00"
                           ,"#009900"
                           
                           ,"#0000FF"
                           ,"#0000CC"
                           ,"#000099"
                        ];
        
        
        for (var x = 0; x < 3; x++) {
            for (var y = 0; y < 3; y++) {
                var rect = [
                               new GLatLng(sw.lat() + latStep*y + latOffset, ne.lng() - lngStep*x - lngOffset)
                              ,new GLatLng(sw.lat() + latStep*(y+1) + latOffset, ne.lng() - lngStep*x - lngOffset)
                              ,new GLatLng(sw.lat() + latStep*(y+1) + latOffset, ne.lng() - lngStep*(x+1) - lngOffset)
                              ,new GLatLng(sw.lat() + latStep*y + latOffset, ne.lng() - lngStep*(x+1) - lngOffset)
                           ];
                var colorIdx = Math.floor(Math.random() * colorList.length);
                map.addOverlay(makePolygon(rect, colorList[colorIdx], 3, 1, colorList[colorIdx], 0.5 ));
            }
        }
      }
    }
    
    function makePolygon(bound, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity){
        var polygon = new GPolygon(bound, strokeColor, strokeWeight, strokeOpacity, fillColor, fillOpacity);
        return polygon;
    }


    
    GEvent.addDomListener(window, "load", load);
    GEvent.addDomListener(window, "unload", GUnload);
  //]]>
  </script>
</head>
<body >
  <h1>例−30:GPolygonでメッシュを作る</h1>
  <div id="map" style="width:600px;height:600px;">
</body>
</html>
サイト内検索
Maps APIの本を書きました
Google Maps APIプログラミング入門
全480ページ。Google Maps API ver.2, ver.3, for Flash, Static Maps API v2, Google Maps API Primery, ライセンス…など、Google Maps APIに関連する幅広い内容の本を書きました。
このサイトで公開しているサンプルはもちろん、本のために作ったサンプルも満載です。
詳しくはこちら

Google Maps Designer
Google Maps Designer