Google Latitude Mashup With Google maps ~ GOOGLE CODE , TIPS TRICKS and Hacks

Google Latitude Mashup With Google maps

feature , Google Latitude

Thursday, May 5, 2011

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

Anonymous

June 27, 2011 at 11:20 PM

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?

June 27, 2011 at 11:52 PM

This will help you
http://bestfromgoogle.blogspot.com/2011/05/easier-way-to-use-google-latitude-api.html

June 28, 2011 at 3:28 PM

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

Pascal

October 22, 2011 at 10:48 AM

there was an mistake in this code :

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

lovly greets from germany , Crazyboy1

Unknown

April 2, 2013 at 6:27 AM

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