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
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);
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 .
Read more...
