70 lines
2.7 KiB
Plaintext
70 lines
2.7 KiB
Plaintext
|
{{"""
|
||
|
|
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&v=2&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>
|