Google Maps JS API

1,530 views

Published on

A quick and opinionated view on the Google Maps JS API.

Published in: Internet, Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,530
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
40
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Google Maps JS API

  1. 1. Google Maps JS API Alberto Simões ambs@di.uminho.pt
  2. 2. Terms of Use and Privacy ● Available both as free and paid services; ● Free service is limited: ○ 25 000 map loads per day. ○ soft quota. ● Needs service API key; ● Can be controlled per-host or using OAuth credentials.
  3. 3. Obtaining an API Key ● Google APIs are controlled at https: //console.developers.google.com ● Each API should be activated independently.
  4. 4. Obtaining an API Key
  5. 5. Basic HTML for Google Maps <!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>
  6. 6. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=_KEY_&sensor=false"> </script> Basic HTML for Google Maps
  7. 7. Basic HTML for Google Maps <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(41.5442, -8.3219), zoom: 3 }; ...
  8. 8. Basic HTML for Google Maps var map = new google.maps.Map( document.getElementById( "map-canvas" ), mapOptions); } google.maps.event.addDomListener( window, 'load', initialize); </script>
  9. 9. Basic HTML for Google Maps </head> <body> <div id="map-canvas"/> </body> </html>
  10. 10. Basic HTML for Google Maps
  11. 11. Default UI By default, Google Maps include: ● Zoom Control (enabled); ● Pan Control (enabled); ● Scale Control (disabled); ● Map Type Control (enabled); ● Street View Control (enabled); ● Rotate Control (enabled for 45º view); ● Overview Map Control (enabled…).
  12. 12. Disabling/Enabling the Default UI Disabling completely the default behaviour: function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), disableDefaultUI: true, } var map = new google.maps.Map(..., mapOptions); }
  13. 13. Disabling/Enabling the Default UI Controlling each UI object: var mapOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), panControl: false, zoomControl: false, mapTypeControl: false, scaleControl: false, streetViewControl: false, overviewMapControl: false, }
  14. 14. Disabling/Enabling the Default UI
  15. 15. Configuring the Default UI Elements can be configured in different ways: ● Zoom Control have two different sizes; ● Map Type can be shown as a toolbar or a drop-down menu; ● … Elements can be placed in 8 different positions.
  16. 16. Configuring the Default UI var mapOptions = { center: new google.maps.LatLng(41.5442, -8.3219), zoom: 3, panControl: false, mapTypeControl: false, streetViewControl: false, overviewMapControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, }, };
  17. 17. Configuring the Default UI
  18. 18. More on UI It is possible to define custom buttons: ● based on XHTML and CSS; ● the control is pushed in a stack of controls in the desired position; ● to the control is associated a javascript method.
  19. 19. Using Markers ● Each mark is placed in a latitude/longitude; ● Markers have a specific title (tooltip); ● They can be removed; ● Support animations; ● Customizable to other icons;
  20. 20. Placing a Marker <script type="text/javascript"> function initialize() { var braga = new google.maps.LatLng(41.5442, -8.3219); var mapOptions = { zoom: 8, center: braga }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga" }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
  21. 21. Placing a Marker
  22. 22. Removing a Marker when DblClicked function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { zoom: 8, center: braga }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga" }); google.maps.event.addListener(marker, ‘dblclick’, function() { marker.setMap(null); }); }
  23. 23. Animating a Marker function initialize() { // ... var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga", animation: google.maps.Animation.DROP, }); google.maps.event.addListener(marker, 'click', function() { if (marker.getAnimation() != null) marker.setAnimation(null); else marker.setAnimation(google.maps.Animation.BOUNCE); }); google.maps.event.addListener(marker, 'dblclick', function() { marker.setMap(null); }); }
  24. 24. Custom Markers function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { zoom: 8, center: braga }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var image = "icon.png"; var marker = new google.maps.Marker({ position: braga, map: map, title: "Braga", icon: image, }); }
  25. 25. Custom Markers
  26. 26. Info Windows ● Present geo-referenced text in a small window; ● Usually they are placed with a marker; ● But can be placed directly on a latitude/longitude object. ● Can contain any HTML content. You can force its width by CSS.
  27. 27. Info Window at Marker function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { center: braga, zoom: 10 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var infowindow = new google.maps.InfoWindow( { content: '<div id="content">some <b>HTML</b></div>’, maxWidth: 200, }); var marker = new google.maps.Marker( { position: braga, map: map, title: 'Braga' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); }
  28. 28. Info Window at Marker
  29. 29. Info Window at LatLng object function initialize() { var braga = new google.maps.LatLng(41.5345, -8.4250); var mapOptions = { center: braga, zoom: 10 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var infowindow = new google.maps.InfoWindow( { position: braga, content: '<div id="content">some <b>HTML</b></div>’, maxWidth: 200, }); infowindow.open(map, marker); }
  30. 30. Info Window at LatLng object
  31. 31. Closing Info Window ... var infowindow = new google.maps.InfoWindow( { content: '<div id="content">some <b>HTML</b></div>’, maxWidth: 200, }); var marker = new google.maps.Marker( { position: braga, map: map, title: 'Braga' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); google.maps.event.addListener(marker, 'dblclick', function() { infowindow.close(); }); }
  32. 32. Drawing on a Map ● Can draw: ● Lines; ● Polylines; ● Circles; ● Rectangles. ● These shapes can be configured to be draggable and editable by users.
  33. 33. Drawing a Polyline function initialize() { var braga = new google.maps.LatLng(41.5645, -8.4250); var mapOptions = { center: braga, zoom: 10 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); var lineCoords = [ braga, new google.maps.LatLng(41.5000, -8.4250), new google.maps.LatLng(41.5000, -8.3500), new google.maps.LatLng(41.4500, -8.3000) ]; var line = new google.maps.Polyline({ path: lineCoords, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 20, }); line.setMap(map); }
  34. 34. Drawing a Polyline
  35. 35. Services: Overview ● Directions ● Distances ● Elevation ● GeoCoding ● Maximum Zoom Imagery ● Street View ● Libraries ○ Places, AdSense, Panoramio, ...
  36. 36. GeoCoding Service ● Allows the conversion of a text address in its LatLng coordinates, ● Allows the conversion of a coordinate pair into a text address: ○ At different levels ■ Street ■ County ■ State ■ Country
  37. 37. GeoCoding Request A GeoCoding request looks like: { address: string, // These two are required location: LatLng,// and mutually exclusive bounds: LatLngBounds, region: string }
  38. 38. GeoCoding Response A GeoCoding response looks like: results[]: { types[]: string, formatted_address: string, address_components[]: { short_name: string, long_name: string, postcode_localities[]: string, types[]: string }, partial_match: boolean, geometry: { location: LatLng, location_type: GeocoderLocationType viewport: LatLngBounds, bounds: LatLngBounds } }
  39. 39. GeoCoding Example Given a click on a map: 1) get the LatLng coordinates, 2) get the country name they belong to.
  40. 40. GeoCoding Example function initialize() { var mapOptions = { center: new google.maps.LatLng(41.5442, -8.3219), zoom: 3 }; var map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions); ...
  41. 41. GeoCoding Example ... google.maps.event.addListener(map, 'click', function (event) { var coder = new google.maps.Geocoder(); var request = { location: event.latLng }; coder.geocode(request, function (results, status) { if (status == "OK") { var country = guessCountry(results); alert(country); } else { alert(“no country?”); } }); }); } /* end initialize */
  42. 42. GeoCoding Example function guessCountry(geocoderResults) { for (var i = 0; i < geocoderResults.length; i++) { var res = geocoderResults[i]; for (var j = 0; j < res.address_components.length; j++){ var comp = res.address_components[j]; if (jQuery.inArray("country", comp.types) >= 0) { return comp.long_name; } } } return "??"; } To use jQuery in need to include it: <script src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>
  43. 43. GeoCoding Example
  44. 44. Fusion Tables Introduction ● Fusion tables are a relational database; ● Each user can create and share tables; ● There are tables with relevant information: ○ butterflies species in USA; ○ countries and their number of inhabitants; ○ and many other userfull and futile information.
  45. 45. A Relevant Fusion Table... Table id: 12e2VhiXyMzHWDl6aponObHH_gvlMDoac9RTrcJ0
  46. 46. A Relevant Fusion Table...
  47. 47. A Relevant Fusion Table...
  48. 48. A Relevant Fusion Table...
  49. 49. A Relevant Fusion Table...
  50. 50. Fusion Tables Layers It is possible to render KML over a map. Example: Given a click on a map: 1) get the LatLng coordinates, 2) get the country name they belong to. 3) draw it over the map 4) new clicks remove the country draw, ...and starts again (goto 1).
  51. 51. Fusion Tables Layers // define this outside var layer = null;
  52. 52. Fusion Tables Layers google.maps.event.addListener(map, 'click', function (event) { var coder = new google.maps.Geocoder(); var request = { location: event.latLng }; coder.geocode(request, function (results, status) { if (status == "OK") { var country = guessCountry(results); if (layer != null) { layer.setMap(null); } layer = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '12e2VhiXyMzHWDl6aponObHH_gvlMDoac9RTrcJ0', where: "name = '" + country + "'", }, }); layer.setMap(map); } }); });
  53. 53. Fusion Tables Layers
  54. 54. Reference https://developers.google. com/maps/documentation/javascript/3. exp/reference
  55. 55. Google Maps JS API Alberto Simões ambs@di.uminho.pt

×