1 / 34

Using the Google Maps API

Using the Google Maps API. 1. Objectives. You will be able to Use the Google Maps API to display a map of any location on an HTML page. Programatically modify the location and zoom level of the map. The Google Maps API. Permits web applications to use functionality of google maps.

junius
Download Presentation

Using the Google Maps API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using the Google Maps API 1

  2. Objectives You will be able to • Use the Google Maps API to display a map of any location on an HTML page. • Programatically modify the location and zoom level of the map.

  3. The Google Maps API • Permits web applications to use functionality of google maps. • Tutorial: https://developers.google.com/maps/documentation/javascript/tutorial 3

  4. Getting Started • Create a new Empty Web Site in Visual Studio. • Google_Maps_Demo • .NET Framework 3.5 • Add an HTML page. • Map.html

  5. Google Maps Tutorial 5 Scroll down

  6. Obtaining an API Key No longer necessary. Ignore for now. Scroll down to Hello, World

  7. You can copy and paste from this page, but some modification is necessary. Hello World

  8. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { var myOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

  9. Map Options     <script type="text/javascript">      function initialize() {         var myOptions = {          center: new google.maps.LatLng(-34.397, 150.644),          zoom: 8,          mapTypeId: google.maps.MapTypeId.ROADMAP        };         var map = new google.maps.Map(document.getElementById("map_canvas"),            myOptions);      }    </script> How can we determine latitude and longitude of the place we want to map? http://www.tech-recipes.com/rx/2403/google_maps_get_latitude_longitude_values/

  10. Search for Desired Location

  11. Right click on the red "A" pin and select "What's here"

  12. Lat-Long appears in the Address search bar. Copy and paste into script.

  13. Set Lat-Long

  14. Map with New Center Location Set zoom to 15

  15. Adjust Zoom Level

  16. Campus Map

  17. Satellite Image

  18. Zoom in More

  19. Adding Our Own Stuff • Let’s add text entry boxes to show and set the latitude and longitude. <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 95%"> </div> <div> Latitude: <input type="text" id="tbLat" name="tbLat" /> &nbsp; Longitude: <input type="text" id="tbLong" name="tbLong" />&nbsp; <input type="button" id="Set" value="Set" onclick="Set_Position();" name="btnSetPosition" /> </div> </body> 20

  20. Show New Position At end of function initialize(), still inside the function body : google.maps.event.addListener(map, "idle", function() { var center = map.getCenter().toString(); var latlong = center.split(","); var tbLat = document.getElementById("tbLat"); tbLat.value = latlong[0].substring(1,8); latitude = tbLat.value; var tbLong = document.getElementById("tbLong"); tbLong.value = latlong[1].substring(0,9); longitude = tbLong.value; }); 21

  21. Let the User Set the Position Add to the script below function initialize: function Set_Position() { var tbLat = document.getElementById("tbLat"); var tbLong = document.getElementById("tbLong"); latitude = tbLat.value; longitude = tbLong.value; map.setCenter( new google.maps.LatLng(latitude,longitude )); } Remove var from map = new google.maps.Map() 22

  22. Lat-Long Displayed 23

  23. Setting the Position • Type lat-long into the text boxes • Click “Set” • Let’s look at Miami • Latitude 25.77 • Longitude -80.17 24

  24. Miami 25

  25. Find the Lat/Long of the Empire State Building • Zoom out • Move to NYC • Zoom in • Move to 5th Ave and 34th Street 26

  26. Locate NYC 27

  27. Zooming In 28

  28. April 2009 29

  29. Dec. 2009 30

  30. April 2010 31

  31. April 2011 32

  32. The Empire State Building (April 2011)

  33. The Empire State Building (July 2012)

More Related