source: tmcsimulator/branches/LCSv1/views/generic.map @ 593

{{"""

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>