1. Google Maps API

2. Static Maps send an HTTP GET request receive an image (PNG, GIF, JPEG) no javascript needed encode params in URL example: http://maps.googleapis.com/maps/api/staticmap?param1=val1 &param2=val2...

3. Static Maps embed using the "src" attribute of the tag. some parameters: – cetner: "lat,long" or "string address" – zoom, size, scale – path, markers – sensor

4. Static Maps http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zo om=14&size=512x512&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,- 74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false

5. Static Maps Documentation: https://developers.google.com/maps/document ation/staticmaps/

6. Javscript API embed Google Maps in web pages. provides functions to manipulate maps free new: API key optional https://developers.google.com/maps/docume ntation/javascript/

7. Javscript API reference the API libraries in the embed the map canvas in the web page: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=false">

8. Loading the API Browser must load Maps API (js code) from Google. client code should not run until after the API has finished loading. e.g. if you call the API functions in initialize:

9. A Simple Map a map object takes an html element and an options object: var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions );

10. A Simple Map myOptions is a JS object, specified using JSON: where location is a LatLng object: many more options are available var myOptions = { center: location, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var location = new google.maps.LatLng(40.4, -79.9);

11. A Simple Map a LatLng object specifies a location: and the map type can be: – google.maps.MapTypeId.ROADMAP – google.maps.MapTypeId.TERRAIN – google.maps.MapTypeId.SATELLITE var location = new google.maps.LatLng(40.4, -79.9);

12. Create a Map full code listing: function initialize() { var location = new google.maps.LatLng(40.4, -79.9); var myOptions = { center: location, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map( document.getElementById("map_canvas"), myOptions ); }

13. Placing Markers markers indicate points of interest marker options specify: location, icon, etc. set the marker using setMap() var options = { position: new google.maps.LatLng(-27.463347, 153.02496) }; var marker = new google.maps.Marker(options); marker.setMap(map); // set the marker on the map

14. Interactive Maps you can add event handlers to the map: example: show the (lat,lng) when the user clicks on the map. function onMapClick(details) { alert(details.latLng); } // in the init function(): google.maps.event.addListener(map, 'click', onMapClick);

15. Street View function initialize() { var myOptions = { position: new google.maps.LatLng(40.44285, -79.952960), pov: { heading: 0.0, pitch: 20, zoom: 1 } }; var pano = new google.maps.StreetViewPanorama( document.getElementById('map_canvas'), myOptions); }

16. Geocoding & reverse Geocoding convert an address to (lat,lng) var geocoder = new google.maps.Geocoder(); var request = { address: "48 Pirrama Rd, Pyrmont" }; geocoder.geocode(request, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { // center map on location... } else { // log error to console... } });

17. Not covered other things you can do: – animate markers – markers in street view – info windows – elevation – directions – shapes & lines