Tuesday, 27 December 2011

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 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