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 :)


Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • blinkbits
  • BlinkList
  • Blogosphere News
  • description
  • E-mail this story to a friend!
  • Furl
  • Gwar
  • LinkedIn
  • Ma.gnolia
  • MySpace
  • Ping.fm
  • Reddit
  • Slashdot
  • Spurl
  • StumbleUpon
  • TwitThis
  • Upnews

11 Responses to “embedding google map in canvas”

  1. Raquibul Islam  on February 15th, 2009

    nice tool . Thanks for sharing , i was looking for this thing .

  2. Click Slab  on February 15th, 2009

    Great.

  3. Satya  on March 28th, 2009

    Really Nice!!

    Thanks for sharing this with us.

    I need to do same in my Facebook app.

  4. ndkxr  on April 9th, 2009

    hi,

    it is great!
    but which web should I use to apply for a google map api?

    My web site URL: is it the callback page URL or the canvas page URL?

    I tired both, but both of them say the Google map api has already been used by other website

    Can you help me?

    Thanks!!!

  5. ndkxr  on April 9th, 2009

    I tired both, but on the facebook app page, it always say the Google map api has already been used by other website, no matter which api I use…

  6. ndkxr  on April 9th, 2009

    sorry, i forget www when apply for google api…

  7. ndkxr  on April 13th, 2009

    Hi do you know how to pass array to the map.php?
    I wanted to pass an array of address to map.php to show on GoogleMap. I tired session, but session didn’t pass value at all.

    ex: in the index.php

    in map.php

    but nothing outputed…

    Thanks so much!!

  8. ndkxr  on April 13th, 2009

    ex: in the index.php

    session_start();
    $_SESSION['test'] = “test”;

    in map.php
    session_start();
    echo $_SESSION['test'];

    but nothing outputed…

  9. ritesh ambastha  on July 7th, 2009

    Hey,
    Thanks a ton for sharing such a wonderful work on FB. Am successfully using google maps in my application. Now I want to use ‘add-section-button’ for adding this app on my profile.

    I have used this:

    //I want to include the google maps in $p for showing it on my profile. Please help me.

    $facebook->api_client->profile_setFBML(NULL, 615384523, ‘profile’, NULL, ‘mobile_profile’, $p);

    Thanks and appreciated.
    Regards

  10. name  on July 29th, 2009

    So where it to find?,

  11. garuda  on March 2nd, 2010

    what are the content code of the config.php?

Leave a Reply