indexu.com » google map http://www.indexu.com developer blog Wed, 30 Jun 2010 05:06:39 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Adding dynamic gmap with navigation and zooming http://www.indexu.com/adding-dynamic-gmap-with-navigation-and-zooming/ http://www.indexu.com/adding-dynamic-gmap-with-navigation-and-zooming/#comments Mon, 14 Jun 2010 00:34:12 +0000 dody http://www.indexu.com/?p=26 google map with navigation

As many of you request how to replace the static gmap image with dynamic gmap which allow navigation and zooming, I made some test how to do this for the easiest way.

Ok. This is the easiest way. We only need to change the template files. Actually only 2 files.

Edit header.html, usually we use

<body>

but now we need to add onload call to js to load gmap only when detail page is accessed.

<%php%>
global $page_identifier;
 
if ($page_identifier=='detail.php') {
  print '<body onload="initialize()" onunload="GUnload()">';
}
else {
  print "<body>";
}
<%/php%>

Edit detail_link.html, add the div container to show the map, it must have id gmapnav_canvas.

<h3>Location Map</h3>
<div id="gmapnav_canvas" style="width: 640px; height: 400px;text-align:center;margin: 20px;"></div>

Next, the last step is to construct the js code for google map. Edit detail_link.html, you can put the code at the of this file.

<%php%>
 
  $api_key = "";
 
  global $dbConn;
  $query = "select * from idx_link where link_id = '{$_REQUEST['linkid']}' limit 1";
  $result = $dbConn->Execute($query);
 
  $address  = $result->Fields("address");
  $city  = $result->Fields("city");
  $zip  = $result->Fields("zip");
  $state  = $result->Fields("state");
  $country  = $result->Fields("country");
 
  $loc = urlencode("$address, $city, $state, $zip, $country");
 
  $api_req = 'http://maps.google.com/maps/geo?q='.$loc.'&key='.$api_key.'&sensor=false&output=csv';
 
  $api_result = file_get_contents($api_req);
  $arr = explode(',',$api_result);
 
  if ($arr[0]=='200') {
    $latlng = $arr[2].','.$arr[3];
 
    $gmap_js = "
    <script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;key={$api_key}\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById(\"gmapnav_canvas\"));
        map.setCenter(new GLatLng({$latlng}), 10);
 
        var latlng = new GLatLng({$latlng});
        map.addOverlay(new GMarker(latlng));
 
        map.addControl(new GSmallMapControl());
      }
    }
   </script>
    ";
  }
 
  print $gmap_js;
<%/php%>
]]> http://www.indexu.com/adding-dynamic-gmap-with-navigation-and-zooming/feed/ 0