1 Using the Google Maps JavaScript API

2 The Google Maps APIs Permit web applications to use functionality of google maps. Documentation:

The Google Maps APIs 3 Click here

The Google Maps APIs 4 Click here

The Google Maps JavaScript API 5 Click here Scroll down

The Google Maps JavaScript API 6 Scroll down

7 Position cursor in this corner Click icon to copy html

8 Google's Hello, World Simple Map html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

Google's Hello, World (continued) var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: , lng: }, zoom: 8 }); } <script src=" async defer> 9

10 Maps_Demo Create a new ASP.NET Empty web site in Visual Studio.

11 Website > Add New Item Name: hello.html

12 Copy and Paste Google’s Hello World Page Select the Source tab in Visual Studio. Replace all default code in the page with the "Hello, World" page from google. Note Click to Copy link in upper right corner. Delete “key=_YOUR_API_KEY&” from line 29. Second script Click Play button.

13 Here it is!

14 Let’s look at a more interesting location var latitude = ; var longitude = ; var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: latitude, lng: longitude}, zoom: 8 }); } Modify first script (line 20) as follows:

15 Florida Map

16 Set zoom level to 14. function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: latitude, lng: longitude}, zoom: 14 }); }

17 Map of USF Area

18 A Bigger Map Expand the page to full screen. Zoom in. Click + icon in lower right corner

A Bigger Map 19

Zoom In 20 Click here

Satellite Image 21

Zoom in More 22

23 Adding Our Own Stuff Let’s add text entry boxes to show and set the latitude and longitude. Add at end of body: Latitude: Longitude: <input type="button" id="Set" value="Set" onclick="set();" name="btnSet" />

24 Show New Position At end of function initMap(), 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"); var end = latlong[1].indexOf(")"); tbLong.value = latlong[1].substring(0,end); longitude = tbLong.value; });

25

26 Let the User Set the Position Add below function initMap, but inside the same script: function set() { var tbLat = document.getElementById("tbLat"); var tbLong = document.getElementById("tbLong"); latitude = tbLat.value; longitude = tbLong.value; map.setCenter( new google.maps.LatLng(latitude,longitude )); }

27 Lat-Lng Displayed

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

29 Miami

30 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

31 Locate NYC

32 Zooming In

33 The Empire State Building

34 End of Section