GoogleMap Component

In order to add a Google map to your site, you need to get a Google Maps API key for that site. This allows you to embed the maps into your web pages and provides you with the terms and services for using the API key.

Steps:
1. Create a component called 'GoogleMap'
a. Create a dialog which consists of address, latitude and longitude fields.
b. GoogleMap.jsp

GoogleMap.Jsp LOGIC:
1. Read the Address or location from the user through dialog.
2. Get the latitude and longitude values based on location
3. Output the map on the page.

GoogleMap.jsp code:

<%-- Google Map component. NA --%>

<%%><%@include file="/libs/foundation/global.jsp"%><%%>

<%@page session="false" %>

<% String searchLoc= properties.get("address",""); %>

<!DOCTYPE html >

<meta name = "viewport"

content = "initial-scale=1.0, user-scalable=no" / >

<script type = "text/javascript"

src = "http://maps.google.com/maps/api/js?sensor=false" > < /script> <

script type = "text/javascript" >

function initialize() {

var geocoder = new google.maps.Geocoder();

var address = '<%=searchLoc %>';

alert(address);

geocoder.geocode({

'address': address

function(results, status) {

alert("--------------");

if (status == google.maps.GeocoderStatus.OK) {

var latitude = results[0].geometry.location.lat();

var longitude = results[0].geometry.location.lng();

alert(latitude);

alert(longitude);

//document.write(latitude);

var latlng = new google.maps.LatLng(latitude, longitude);

var myOptions = {

zoom: 18,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var myMarker = new google.maps.Marker({

position: latlng,

map: map,

title: "About.com Headquarters"

});

}

});

return true;

}

</script>

<div > Google Map < /div>

<div id = "map_canvas" style = "width:300px; height:300px;" >

</div>

<script type = "text/javascript" >

initialize();

//call Java script function automatically...

</script>

References:
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://webdesign.about.com/od/javascript/ss/add-google-maps-to-a-web-page.htm
http://briancray.com/2009/04/01/how-to-calculate-the-distance-between-two-addresses-with-javascript-and-google-maps-api/

AEM Tutorials for Beginners

April 10, 2020
Estimated Post Reading Time ~