embedding google map in canvas


ever tried to embed static google map in your facebook application canvas? wait a bit, i think you are firing a question at me “whats the difference, its all the same, a static image, eh?” – nope! it wont work the way you think . whenever you try to embed a static google map image, google parse it as a “Bad Or Malformed” request and returns nothing! and in canvas url you can’t directly import any javascript but fbjs. so all we have to do is embed google map using a <fb:iframe /> object

enough said, lets see it in action. first try to embed a google static map in regular way and see the result. 


<php
include_once("config.php");
?>
Here is the map of Dhaka <br/>
<img src='http://maps.google.com/staticmap?center=23.70991,90.407&amp;amp;zoom=14&amp;amp;size=400x300&amp;amp;key=<api_key>=23.7099,90.407,green' /> <br/>
Pretty cool, ya?

output is 


Here is the map of Dhaka
Pretty cool, ya?

you will be surprised that this code will render only the texts and no image in your application canvas, though the image url is fully valid.

now here is the revised version using <fb:iframe />


<?php
include("config.php");
?>
Here is the map of Dhaka <br/>
<fb:iframe width='400' height='300' style='border:0' frameborder='0' src='http://sandbox.ofhas.in/fbtest/map.php?lat=23.7099&amp;amp;lon=90.407' ></fb:iframe>
<br/>
Pretty cool, eh?

we are using a map generator (map.php) using the latitude and longitude of a specific location, as the source of our iframe. so here is the source code of map.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Map Markers</title>
    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=<api_key>"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>), 13);

          var point = new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>);
          map.addOverlay(new GMarker(point));
      }
    }

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()" style='margin:auto;padding:0px;>
    <div id="map_canvas" style="width: 398px; height: 298px;margin:10 0;border:1px solid #ccc;"></div>
  </body>
</html>

this time output is pretty cool :) have a look

picture-18

so this is it! in our next article we are coming with the complete source code of a standalone twitter like application, developed using FBConnect to allow you to monitor your friend’s status and also to change yours. stay tuned :)