Create Google Map using jQuery
These days every company is displaying their contact address not only in text, also displaying in the Map format by using Google API.
There are many jQuery plug-ins which helps you to display the address in Google Map by using Google API. Here we discuss about one of that plug-in which calls Google API to display the address in map.
As shown below we are displaying the address in google map.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create Google Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript">
function CreateMap() {
var result;
var address = $('#txtAddress').val();
var url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&sensor=false'
$.getJSON(url,
function (data) {
if (data.status == "OK") {
MarkAddress(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng, address);
}
else {
latArray.push('');
lonArray.push('');
}
});
}
function MarkAddress(latitude, longitude, address) {
var myMarkers = {};
myMarkers.markers = [];
myMarkers.markers.push({ latitude: latitude, longitude: longitude, icon: "images/locate.png", baloon_text: address });
$("#divMAP").mapmarker({
zoom: 8,
center: address,
markers: myMarkers
});
}
</script>
</head>
<body>
<label>
Search</label> <input type="text" id="txtAddress" /> <input
type="submit" onclick="CreateMap();" id="Create Map" /><br />
<br />
<div id="divMAP" style="width: 280px; height: 300px;">
</div>
</body>
</html>
As shown above we are passing the address entered in textbox to the CreateMap() javascript function. Google Map API takes the longitude and latitude to display the address, so first we have to find the latitude and longitude for given address.
To find the latitude, longitude for given address google provides another API "'http://maps.googleapis.com/maps/api/geocode/json?address= " for which we have to provide the address as shown above.
Once we got the latitude and longitude we have to call the Google MAP API by calling mapMarker javascript function as shown in MarkAddress() function.
Now check whether our code is working or not by entering some address in textbox and click on Search button. The output is as shown below.
Please download the source code by using below link.
