Thursday, May 5, 2011

Google Latitude Mashup With Google maps


This thread is a continuation of my post on Google
Latitude Badge API
 , so to have a better understanding
of this topic you are requested to have a look at the post
before .In this post I will be showing you how to display
the users Google Latitude location dynamically on Google
maps .


For that we will be using a jquery plugin called JQUERY:GMAP3

Step1
Create a php file that will return the latitude & longitude
Step2 
Make an ajax call to the php file
Step3 
Display the google latitude result on google maps



Step1
The file that will return the latitude & longitude .
We are naming this php file as
 getposition.php

<?php
//Replace the YOURUSERID in the url below with your Badge userid . 
$url="http://www.google.com/latitude/apps/badge/api?user=YOURUSERID&type=json" ;
// We get the content
$content = file_get_contents( $url );
print($content); //This will return the data in json format
?>




Step 2 & Step3
For the ajax calls we will be using jquery
functionalities directly ,a call will be
made to the php page, which will return me
data in json format which we will parse
using jquery parseJSON() function .After
this using the jquery GMAP3 library
(http://plugins.jquery.com/project/gmap3)
we will be displaying the marker on google map .



<html>    
  <head> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"> </script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="gmap3.js"> </script> 

    
    <script type="text/javascript">   

      $(function(){
 // ajax call to the php page   
  $.ajax({
   type: "POST",
   url: "getposition.php",
   success: function(msg){
       
     var obj=$.parseJSON(msg); 
     // Parse data recived .For more details check  //http://api.jquery.com/jQuery.parseJSON/
     var latitude=obj.features[0].geometry.coordinates[1];
     var longitude=obj.features[0].geometry.coordinates[0];
     var coord=new google.maps.LatLng(latitude,longitude); 
             
     $('#test1').gmap3(
      { action: ':addMarker',
      latLng: coord,
      map:{
       center: true,
       zoom: 14,
       mapTypeId: google.maps.MapTypeId.ROAD
      }
      }
      );    
   }
  });
  
      });
    </script>  
  </head>
  <body>
    
</body> </html>

This was just a basic mashup of google latitude & google maps .
If you want to use all the functionalities of google maps you can
refer the site http://night-coder.com/jquery-plugin-gmap3.html
which has clear explanation of using google maps jquery plugin.

If you have still queries about this thread , please do comment .

Thanks !!



9 comments

thanks for sharing... i can't figure out how to pick up the timestamp from the json file and show in the infowindow of the marker. could you help and point me in the right direction please?

Vaishakh - Great stuff, thank for the quick response.. you made my day!!!

there was an mistake in this code :

action: ':addMarker',
musst be
action: 'addMarker',

lovly greets from germany , Crazyboy1

Hey Vaishakh, i'm developing android application that requires to track other phone users and the codes are in java. The code above is in PHP. How do i add this features in my application. By the way, I am new to all of these and I hope that you can really help me. Thanks =)

hi,

your tutorial don't work for me ! I have just a blank screen instead of roadmap.
Help me please.

Hi localisPS..... Can you share the userID to check .

test with that user ID
https://www.google.fr/latitude/apps/badge/api?user=-7457067457133143472&type=json

Help me!!! I have just a blank screen