BLOG HAS NEW ADDRESS

BLOG HAS BEEN MOVED TO www.BestFromGoogle.blogspot.com

Sunday, March 20, 2011

Google Latitude Mashup With Google maps




My Second post was on getting the user's location using
google latitude/badge api .This thread is definitely a
continuation of the earlier post , here i will show you how
to display the user location 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

######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 .



#### Showmap.html ######

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

    <style>
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 500px;
        height: 250px;
      }
      #container{
        overflow: auto;
        text-align:center;
        width: 100px;
        margin: 20 auto;
      }
      .box{
        float: left;
        width: 20px;
        height: 20px;
        margin-left: 20px;
        background-color:#FFF;
        border:1px solid #000;
      }
    </style>
    <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>
    <div id="test1" class="gmap3"></div>
  </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
which has clear explanation of using google maps jquery plugin.

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



6 comments:

copilot0910 March 20, 2011 at 3:33 PM  

hi,

thank you for your awesome help with the latitude/maps api.

i have got a slight problem.

I copied your code word for word, and it seems that i get a box when i test.

this box has nothing inside of it

no maps, or anything.

please help if you can, because the same thing may be happening to you, because it seems that your example has a broken link or doesn't work.

thank you for everything

Vaishakh Thayyil March 21, 2011 at 5:07 AM  

I have run & tested my code on localhost and its working correctly on Chrome ,Mozilla ,there seems to be certain problem with Internet Explorer.
So if you are using IE ,this may be a reason of not getting the results .
Second problem I sense is that you may not have replaced your USERID correctly in php file(getposition.php).
For testing purposes you can use my userId 6443653418337147643 .

Change the first line of the php code to
$url="http://www.google.co.in/latitude/apps/badge/api?user=6443653418337147643&type=json";

Third possible problem maybe :
You maynot have downloaded the gmap3.js or jquery.js .Keep the js files in the same folder as getposition.php,showmap.html .

If you are running it on localhost , please
run as http://localhost/showmap.html in the browser since an ajax call is made to the getpostiton.php which needs to be processed by the server.

I feel you should get it working by now .

Thanks ,

Vaishakh

copilot0910 March 22, 2011 at 5:14 AM  

it works now. thanks.

can i distribute the code now that it works, but with your name and link on it????

Vaishakh Thayyil March 22, 2011 at 6:55 AM  

Yeah ,you can distribute the code ,
but please do backlink to this page!!!!

ccaceres March 28, 2011 at 11:04 AM  

Hi, i got here thanks to copilot, and i have to say thanks for the tutorial!!!

Right now the USERID is hardcoded, is there a any way to get it dynamically?

Vaishakh Thayyil March 29, 2011 at 12:55 PM  

@ccaceres
I am working on this part to get the userid dynamically .

I will send mail to all users connected to this blog .

So if you are intrested in recieveing updates stay connected thru FRIEND CONNECT.
I am also planning to write one more post in which you will have multiple latitude users shown on a single map & which will auto update users position
on google map as well .

If you are having trouble retrieving your userid please visit the blog .

http://googlelatiude.blogspot.com/2011/03/easier-way-to-use-google-latitude.html

About This Blog

This Tech Blog is about a month old and increasing
number of pageviews and a steady increase in
our loyal readers has prompted us in writing
unique articles that will be of great use to all the
webmasters .The blog currently has only 15+
unique google tricks and hacks , we will be adding
new tricks as and when we stumble upon something
useful to our readers .

  © Blogger templates The Professional Template by Ourblogtemplates.com 2008

Back to TOP