11 Using the Google Maps API

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.

33 The Google Maps API Permits web applications to use functionality of google maps. Tutorial:

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

55 Google Maps Tutorial Scroll down

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

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

8 html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } <script type="text/javascript" src=" function initialize() { var myOptions = { center: new google.maps.LatLng( , ), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); }

10 Map Options function initialize() { var myOptions = { center: new google.maps.LatLng( , ), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } How can we determine latitude and longitude of the place we want to map?

11 Search for Desired Location

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

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

14 Set Lat-Long

15 Map with New Center Location Set zoom to 15

16 Adjust Zoom Level

17 Campus Map

Satellite Image

Zoom in More

20 Adding Our Own Stuff Let’s add text entry boxes to show and set the latitude and longitude. Latitude: Longitude: <input type="button" id="Set" value="Set" onclick="Set_Position();" name="btnSetPosition" />

21 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; });

22 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()

23 Lat-Long Displayed

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

25 Miami

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

27 Locate NYC

28 Zooming In

29 April 2009

30 Dec. 2009

31 April 2010

32 April 2011

The Empire State Building (April 2011)

The Empire State Building (July 2012)