TIPS IT Consulting

Note: TIPS IT Consulting acquired TIPS BF Consulting on Jan. 6, 2011

Google Map Initial Setup

Your Javascript has to call the APIs in the Google Javascript libraries in order to display
the Google Map

The Javascript sample has three JavaScript sections:

1) JavaScript method that converts a street address to the corresponding latitude and longitude
2) JavaScript method that displays the Google Map based on the latitude and longitude
3) Define the Google JavaScript libraries including the Google Map key.
   a) Obtain the required Google Map Key from Google Map Key
   b) There is a standard key for local host on your PC: Your html file or
      if you are using Apache server, the url is http://localhost/[your subdirectory]

      Otherwise, the Google Key is connected to the url of your website

Here is the sample of how to call the Google Javascript to convert an address
into the corresponding latitude and longitude


     function showLoc() {

 	            var addressTest = document.getElementById("addresstype");
 	            var subjectAddress = "9900 Pomona Drive, Bethesda Maryland 20817";
 	            var subjectAddress = addressTest.value;

 	            var geocoder, subjectAddress;
 	            geocoder = new GClientGeocoder();
 	            geocoder.getLocations(subjectAddress,
 	            function(response) {
 	                if (!response || response.Status.code != 200) {
 	                    alert("Sorry, we were unable to geocode the address");
 	                } else {
 	                    subjectAddress = {
 	                        lat: response.Placemark[0].Point.coordinates[1],
 	                        lon: response.Placemark[0].Point.coordinates[0],
 	                        address: response.Placemark[0].address
 	                    };

 	                    lat = subjectAddress.lat;
 	                    long = subjectAddress.lon = subjectAddress.lon;

 	                    initialize();
 	                }
 	            });
        }


    Here is the sample of how to call the Google Javascript to display the Google Map
    based on the latitude and longitude

        function initialize() {

	      if (GBrowserIsCompatible()) {
	           var map = new GMap2(document.getElementById("map_canvas"));
	           var customUI = map.getDefaultUI();

			   customUI.maptypes.hybrid = false;
	           map.setUI(customUI);

	           map.setCenter(new GLatLng(lat,long), 15);

	           var  point = new GLatLng(lat,long);

	          map.addOverlay(new GMarker(point));

	      }
    }

   Here is the sample of how to define the Google libraries and using the Google Map key
   for the local host.
   

      <script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;
           key=ABQIAAAAE2g3EOUgrybkax441XnPDxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQzXN-sLXtD53T8qL3JewtbhfT7tw\"
                type=\"text/javascript\"></script>
                    <script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\" type=\"text/javascript\"></script>
        <script src=\"http://maps.google.com/maps?file=api&v=2&key=<cfoutput>#request.googlemaps#</cfoutput>\" type=\"text/javascript\"></script>



********************************************************************************
Below is the entire html that will display the Google Map based on the user input:
Feel free to copy and paste it to an editor like Windows/NotePad



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Map Markers</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
       key=ABQIAAAAE2g3EOUgrybkax441XnPDxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQzXN-sLXtD53T8qL3JewtbhfT7tw"
            type="text/javascript"></script>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=<cfoutput>#request.googlemaps#</cfoutput>" type="text/javascript"></script>
    <script type="text/javascript">
var lat;
var long;
    function setup()
    {
        //alert("reached setup");
        showLoc();
        initialize();
    }
    function initialize() {

      if (GBrowserIsCompatible()) {
           var map = new GMap2(document.getElementById("map_canvas"));
           var customUI = map.getDefaultUI();

		   customUI.maptypes.hybrid = false;
           map.setUI(customUI);

           map.setCenter(new GLatLng(lat,long), 15);

           var  point = new GLatLng(lat,long);

          map.addOverlay(new GMarker(point));

      }
    }
    function showLoc() {

	            var addressTest = document.getElementById("addresstype");
	            var subjectAddress = "9900 Pomona Drive, Bethesda Maryland 20817";
	            var subjectAddress = addressTest.value;

	            var geocoder, subjectAddress;
	            geocoder = new GClientGeocoder();
	            geocoder.getLocations(subjectAddress,
	            function(response) {
	                if (!response || response.Status.code != 200) {
	                    alert("Sorry, we were unable to geocode the address");
	                } else {
	                    subjectAddress = {
	                        lat: response.Placemark[0].Point.coordinates[1],
	                        lon: response.Placemark[0].Point.coordinates[0],
	                        address: response.Placemark[0].address
	                    };

	                    lat = subjectAddress.lat;
	                    long = subjectAddress.lon = subjectAddress.lon;

	                    initialize();
	                }
	            });
        }

    </script>
  </head>
  <body onunload="GUnload()">
  <body onUnload="GUnload()">

    Enter address:&nbsp;<input type="text" id="addresstype" size="50">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" onclick="showLoc()" value="Submit">
    <br>
    <br>
    <div id="map_canvas" style="width: 700px; height: 500px"></div>

  </body>
</html>