Google Maps API integration is very easy to display customize google maps in your web application. To integrate google maps first of all you need to create your unique API Key. Generate your API Key here.
Step #1. To use google maps api v3 add below script in your page.
<script type="text/javascript">
function initialize() {
//Get Latitude and Longitude from Address
var geocoder = new google.maps.Geocoder();
var address ='<s:property value="location"/>';
var latitude;
var longitude;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
resultLocation(latitude,longitude);
}
});
}
function resultLocation(latitude,longitude){
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(latitude,longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Display Marker in google map
var markerPos = new google.maps.LatLng(latitude,longitude);
var marker = new google.maps.Marker({
position: markerPos,
map: map,
animation: google.maps.Animation.DROP,
icon:'http://img.compilr.org/demoImg/mapIcon.png', //Display Custom Icon
title: '<s:property value="title"/>'
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>Above script includes two featues-
1. Geocoding.
2. Customize Marker(Custom icons to display your location on map).
In geocoding we pass address as string and calculate latitude and longitude then use these LatLong to display your location on map. To display custom icon you need to add icon parameter and pass path of custom icon to it.
Step #2. To display map add below code where you want to display map.
<div id="map_canvas" style="width: 600px; height: 300px;"></div>