Google Map


Try the demo:
Wikka Developers Location
The Google Maps API lets developers embed Google Maps in their own web pages with JavaScript. You can add overlays to the map (including markers and polylines) and display shadowed "info windows" just like Google Maps. (quoted from Google maps API homepage).
 

Based on PivWans idea to use this service to build a UserMap, here is the first code for a googlemap action.


add the following as actions/googlemap.php

  1. <?php
  2. /**
  3.  * Prints a map from Googles Map-service on a page.
  4.  *
  5.  * Note that you have to register your (sub)domain with google to get a key to use the map.
  6.  * See http://www.google.com/apis/maps/signup.html for details.
  7.  *
  8.  * @package    actions
  9.  * @author     {@link http://www.wikkawiki.org/NilsLindenberg Nils Lindenberg} (initial version)
  10.  * @author     {@link http://www.wikkawiki.org/SamuelDR SamuelDR} (bugfix)
  11.  * @author     {@link http://www.wikkawiki.org/FrankChestnut FrankChestnut} (various parameters and api v2)
  12.  *
  13.  * @todo:    - Load markers from...
  14.  *               - phpdoc document params
  15.  */
  16.  
  17. //the key you get from google
  18. $key = 'ABC';
  19.  
  20. // defaults
  21. $latitude  = '37.441944';
  22. $longitude = '-122.141944';
  23. $width     = '300';
  24. $height    = '300';
  25. $maptype   = 'G_NORMAL_MAP';
  26. $zoom      = '4';
  27. $overview  = false;
  28.  
  29. $maptypes  = array('normal'    => 'G_NORMAL_MAP',
  30.                    'satellite' => 'G_SATELLITE_MAP',
  31.                    'hybrid'    => 'G_HYBRID_MAP');
  32.  
  33. // E_ALL fix
  34. if (isset($vars) && is_array($vars)) {
  35.     if (isset($vars['latitude']) && !empty($vars['latitude'])) {
  36.         $latitude = $vars['latitude'];
  37.     }
  38.     if (isset($vars['longitude']) && !empty($vars['longitude'])) {
  39.         $longitude = $vars['longitude'];
  40.     }
  41.     if (isset($vars['width']) && !empty($vars['width'])) {
  42.         $width = $vars['width'];
  43.     }
  44.     if (isset($vars['height']) && !empty($vars['height'])) {
  45.         $height = $vars['height'];
  46.     }
  47.     if (isset($vars['zoom']) && !empty($vars['zoom'])) {
  48.         $zoom = $vars['zoom'];
  49.     }
  50.     if (isset($vars['maptype']) && array_key_exists($vars['maptype'], $maptypes)) {
  51.         $maptype = $maptypes[$vars['maptype']];
  52.     }
  53.     if (isset($vars['overview']) && !empty($vars['overview'])) {
  54.         // 0 & '0' are considered empty so there is no need for further checks
  55.         $overview = true;
  56.     }
  57. }
  58.  
  59. ?>
  60.  
  61. <script src="http://maps.google.com/maps?file=api&v=2&key=<?php echo $key ?>" type="text/javascript"></script>
  62. <div id="map" style="width: <?php echo $width ?>px; height: <?php echo $height ?>px"></div>
  63. <script type="text/javascript">
  64. //<![CDATA[
  65.     setTimeout("ShowGoogleMap()", 100);
  66.  
  67.     function ShowGoogleMap()
  68.     {
  69.  
  70.         if (GBrowserIsCompatible()) {
  71.  
  72.             var map = new GMap2(document.getElementById("map"));
  73.             map.addControl(new GLargeMapControl());
  74.             map.addControl(new GMapTypeControl());
  75. <?php
  76.         if ($overview) {
  77. ?>
  78.             map.addControl(new GOverviewMapControl());
  79. <?php
  80.         }
  81. ?>
  82.  
  83.             map.setCenter(new GLatLng(<?php echo $latitude ?>, <?php echo $longitude ?>, <?php echo $zoom ?>), <?php echo $zoom ?>);
  84.             map.setMapType(<?php echo $maptype ?>);
  85.         }
  86.     }
  87.  
  88. //]]>
  89. </script>


This will print out a map with 300 x 300 pixel and the controls to change between map/satellite-picture and To move/zoom-in zoom-out. The map is centered to Paolo Alto.

Available parameters





Todo


Discussion

      1. As an action:
        {{googlemap source="blablabla.xml"}}
        Actions are used to generate content within a page, so this might be the most natural way to implement this kind of functionality. The problem with this approach is that the XML data source should be created manually, as you suggest, and this is not an interesting option. Alternatively we could have data stored as plain text in another page (say MyPage) and use a specific '/xml' handler to parse this page and generate the data file to be used by the action, e.g.
        {{googlemap source="MyPage/xml"}}
      1. As a handler:
        http://wikkawiki.org/HomePage/googlemap
        A handler typically performs operations on a page as a whole. A /googlemaps handler could display a specific map depending on whether specific strings are present in the page body or, alternatively - if appended to a UserPage - display the location of the user (as stored in a dedicated field of the user table).
      1. As a formatter
        Maybe the most interesting way to implement Google Maps would be to use a specific markup, e.g.




CategoryDevelopmentActions
There are 12 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki