<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js? key=AIzaSyDZ6XbYRGNa2Er0Egh16G4A65dLH2cb2ZY&sensor=false"></script><!-- google map api javascript link-->
</head>
<script>
function initialize()
{
var lat =document.getElementById('lat').value;
var long = document.getElementById('long').value;
var add = document.getElementById('add').value;//text to b appeared in the Infowindow
if(lat && long){
var myCenter = new google.maps.LatLng(lat,long);
var mapProp = {
center:myCenter,
zoom:5, //increase zoom value to zoom map
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);// id of the div where map has to be displayed
var marker = new google.maps.Marker({
position:myCenter
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:add //assigning the variable add to infowindow
});
infowindow.open(map,marker);
//mouseover indicates,infowindow to be appeared on mouse over.You can also try 'click'
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);// to load map window on page load
</script>
<div id="googleMap" style="height: 350px;"> <!--div where the map is displayed-->
<input type="hidden" name="lat" id="lat" value="<?php echo $lat; ?>" />
<input type="hidden" name="long" id="long" value="<?php echo $long; ?>" />
<input type="hidden" name="add" id="add" value="<?php echo $address; ?>" /></div>
</html>