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 address, latitude and longitude fields.
b. GoogleMap.jsp
GoogleMap.Jsp LOGIC:
1. Read Address or location from user through dialog.
2. Get the latitude and longitude values based on location
3. Output the map on 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/
Steps:
1. Create a component called 'GoogleMap'
a. Create a dialog which consists address, latitude and longitude fields.
b. GoogleMap.jsp
GoogleMap.Jsp LOGIC:
1. Read Address or location from user through dialog.
2. Get the latitude and longitude values based on location
3. Output the map on 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/
No comments:
Post a Comment