generic.map

2012-04-05 18:52:12 -05:00
parent 6e9df7cf18
commit d594b30a69
2 changed files with 70 additions and 1 deletions
@@ -1 +1 @@
-Version 1.99.7 (2012-04-05 18:09:31) dev
+Version 1.99.7 (2012-04-05 18:51:12) dev
@@ -0,0 +1,69 @@
+{{"""
+this is an example of usage of google map
+the web2py action should be something like:
+
+def map():
+    return dict(
+      googlemap_key='...',
+      center_latitude = 41.878,
+      center_longitude = -87.629,
+      scale = 7,
+      maker = lambda point: A(row.id,_href='...')
+      points = db(db.point).select() where a points have latitute and longitude
+    )
+
+the corresponding views/defaut/map.html should be something like:
+
+    \{\{extend 'layout.html'\}\}
+    <center>\{\{include 'generic.map'\}\}</center>
+
+"""}}
+  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key={{=googlemap_key}}" type="text/javascript"></script>
+    <script type="text/javascript">
+    //<![CDATA[
+    function load() {
+      if (GBrowserIsCompatible()) {
+        var map = new GMap2(document.getElementById("map"));
+        map.addControl(new GSmallMapControl());
+        map.addControl(new GMapTypeControl());
+        map.setCenter(new GLatLng({{=center_latitude}},
+           {{=center_longitude}}), {{=scale}});
+        // 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, 14);
+        var blueIcon = new GIcon();
+        blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
+        blueIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
+        blueIcon.iconSize = new GSize(37, 34);
+        blueIcon.shadowSize = new GSize(37, 34);
+        blueIcon.iconAnchor = new GPoint(9, 34);
+        blueIcon.infoWindowAnchor = new GPoint(9, 2);
+        blueIcon.infoShadowAnchor = new GPoint(18, 14);
+
+        function createMarker(point, i, message) {
+           // Set up our GMarkerOptions object
+           if(i==0) markerOptions = { icon:blueIcon };
+           else markerOptions= {}
+           var marker = new GMarker(point, markerOptions);
+           GEvent.addListener(marker, "click", function() {
+             marker.openInfoWindowHtml(message);
+           });
+           return marker;
+        }
+        {{for point in points:}}{{if point.latitude and point.longitude:}}
+          var point = new GLatLng({{=point.latitude}},{{=point.longitude}});
+          map.addOverlay(createMarker(point, 0, 
+            '{{=point.get('map_marker',maker(point))}}'));
+        {{pass}}{{pass}}
+     }
+    }
+    //]]>
+    </script>
+    <div id="map" style="width: 800px; height: 500px"></div>
+    <script>load();</script>