Peeking at file "demo_app2/views/generic.map"

<<back Edit

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
{{"""
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>