API tools faq
paste
Advertisement
saurabh6790

GEOmap

saurabh6790
Sep 25th, 2013
507
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5. <style type="text/css">
  6.   html { height: 100% }
  7.   body { height: 100%; margin: 0px; padding: 0px }
  8.   #map_canvas { height: 100% }
  9. </style>
  10. <script type="text/javascript"
  11.     src="http://maps.google.com/maps/api/js?sensor=false">
  12. </script>
  13. <script type="text/javascript">
  14.   //Declare the variable that will store the geocode object
  15.   var geocoder;
  16.   var map;
  17.   var markers = [];
  18.   function initialize() {
  19.     //Set the geocoder variable equal to an instance of the google maps geocoder object as new google.maps.Geocoder()
  20.     geocoder = new google.maps.Geocoder();
  21.     var latlng = new google.maps.LatLng(42.095287, -79.3185139);
  22.     var myOptions = {
  23.       zoom: 10,
  24.       center: latlng,
  25.       mapTypeId: google.maps.MapTypeId.ROADMAP
  26.     };
  27.     map = new google.maps.Map(document.getElementById("map_canvas"),
  28.         myOptions);
  29.   }
  30.   // Sets the map on all markers in the array.
  31. function setAllMap(map) {
  32.   for (var i = 0; i < markers.length; i++) {
  33.     markers[i].setMap(map);
  34.   }
  35. }
  36. // Removes the overlays from the map, but keeps them in the array.
  37. function clearOverlays() {
  38.   setAllMap(null);
  39. }
  40. // Shows any overlays currently in the array.
  41. function showOverlays() {
  42.   setAllMap(map);
  43. }
  44. // Deletes all markers in the array by removing references to them.
  45. function deleteOverlays() {
  46.   clearOverlays();
  47.   markers = [];
  48. }
  49.   //Add a second function to your javascript code, call it codeAddress.  It will not have any values passed to it.
  50.   function codeAddress() {
  51.     //The first line of the function should use getElementById to get the address from the text box and place it
  52.     //into a variable we'll call sAddress.
  53.     var sAddress = document.getElementById("inputTextAddress").value;
  54.     //Call the geocode method of the geocoder object, this will take two passed in parameters.  The first is
  55.     //the GeocoderRequest, this says what kind of request is being made and what the request value is.  
  56.     //The second is the callback function that will be used to process the results.
  57.     geocoder.geocode( { 'address': sAddress}, function(results, status) {
  58.         //The callback function should first check the status value of the callback function.  Use an IF statement
  59.         //to test the result, check to see if the status equal google.maps.GeocoderStatus.OK.  Also add an
  60.         //ELSE clause to the if statement as well.
  61.         if (status == google.maps.GeocoderStatus.OK) {
  62.             //If the status equals OK, call the setCenter method of the map object variable.  You will pass this
  63.             //method the results first geometry location.
  64.             map.setCenter(results[0].geometry.location);
  65.             //Next use the same result geometry location to add a map marker to the map object variable.  Create a new
  66.             //variable, we'll call it oMarker, it will be created as a new google.maps.Marker.  The new method take two
  67.             //parmaters, the first is the map object that you're adding the marker to, and the second is the
  68.             //position to place the marker which is again the first results geometry location.
  69.             deleteOverlays();
  70.             alert("mgagg"+results[0]);
  71.             var marker = new google.maps.Marker({
  72.                 map: map,
  73.              
  74.                 position: results[0].geometry.location
  75.             });
  76.             markers.push(marker);
  77.         } else {
  78.             //Finally we're going to add an alert message to the ELSE to let the user know that the Geocode didn't
  79.             //work like it should have.  You can use the status to give a bit more information rather than just saying
  80.             //that it didn't work.
  81.             alert("Geocode was not successful for the following reason: " + status);
  82.         }
  83.       });
  84.   }
  85. </script>
  86. </head>
  87. <body onload="initialize()">
  88.         <!--Create a text box input for the user to enter the street address-->
  89.         Address: <input type="text" id="inputTextAddress" style=" width:300px" title="Address to Geocode"/>
  90.         <!--Create a button input for the user to click to geocode the address-->
  91.         <input type="button" onclick="codeAddress()" id="inputButtonGeocode" style="width:20px" title="Click" value="Click" />
  92.         <div id="map_canvas" style="width:800px; height:600px"></div>
  93.         </div>
  94.     </div>
  95. </body>
  96. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!