This is a very simple way to integrate Google map using latitude and longitude in a div. Just copy+paste the code and set the lat/long according to your location or set it dynamically from database by passing lat/long parameter.
<html>
<head>
<style type="text/css">
div#map {
position: relative;
}
div#crosshair {
position: absolute;
top: 192px;
height: 19px;
width: 19px;
left: 50%;
margin-left: -8px;
display: block;
background: url(crosshair.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
function initialize() {
var latlng = new google.maps.LatLng(18.524220910029783,73.85761860000002);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:200px; height:200px">
<div id="map_canvas" style="width:100%; height:200px"></div>
<div id="crosshair"></div>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div#map {
position: relative;
}
div#crosshair {
position: absolute;
top: 192px;
height: 19px;
width: 19px;
left: 50%;
margin-left: -8px;
display: block;
background: url(crosshair.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
function initialize() {
var latlng = new google.maps.LatLng(18.524220910029783,73.85761860000002);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:200px; height:200px">
<div id="map_canvas" style="width:100%; height:200px"></div>
<div id="crosshair"></div>
</div>
</body>
</html>
Perfect!. thanks working fine.
ReplyDeletethis is not give exact location
ReplyDeleteGood i need for my web www.topworldimages.com
ReplyDeleteThis is good one
ReplyDeletehow to show multiple location from database...
ReplyDeletehow to get the long and lat when i clicked on the map?
ReplyDeletereally helpful for me
ReplyDeletehow to show multiple location from database...using lati and longi
ReplyDeleteI have same question LIKE:
ReplyDeletehow to show multiple location from database...using lati and longi?
I need some information about , How to search multiple locations in single map using Latitude and Longitude .
ReplyDeletewhat to do with dynamic latitude and longitude... Its static ... :(
ReplyDeleteit showing after some time showing error message
ReplyDelete