Mapathon 2013 - Google Maps Javascript API

1,741 views

Published on

Session 1 PPT of Mapathon organized by Google Developers Group, Ahmedabad

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,741
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
63
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mapathon 2013 - Google Maps Javascript API

  1. 1. Ritesh Ambastha,iWillStudy.com, 9th March 2013
  2. 2. Google Maps API Maps API JavaScript Google Web API v3 Places API Services JavaScript API Static Maps Street View Earth API API Image API v3 Google Maps Deprecated Maps SDK Android API API for iOS Ahmedabad
  3. 3. Google Maps JavaScript API v3 Concepts Events Controls Styles Overlays Layers Map Services Libraries Types Ahmedabad
  4. 4. Getting Started APIs HelloWorld API Key Console Program Ahmedabad
  5. 5. Obtain API Keyhttps://code.google.com/apis/console Ahmedabad
  6. 6. Create Client ID Ahmedabad
  7. 7. Client ID Settings Ahmedabad
  8. 8. HelloWorld !!Let’s write the very first HTML
  9. 9. Basic Terminology • API Key Script • Sensor HTML5 • <!DOCTYPE HTML> Map • var mapOptions = { center: new google.maps.LatLng(22,72), zoom: 8, Options }; mapTypeId: google.maps.MapTypeId.ROADMAP Ahmedabad
  10. 10. Basic Terminology • ROADMAPMap Types • SATELLITE • HYBRID • TERRAIN • var map = newMap Object google.maps.Map(document.getElementById("map_ca nvas"), mapOptions); Load Map • <body onload="initialize()"> Ahmedabad
  11. 11. HelloWorld Program<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script><script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(22.1,77.2), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); }</script> Ahmedabad
  12. 12. <!DOCTYPE html> 6<html> <head> <script type="text/javascript”src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVBGLEP0GQpiuDGvNBAaclm62Z0ujZz7U&sensor=false"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(22.9909363,72.48775950000004), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:500px; height:500px"></div> </body></html> Ahmedabad
  13. 13. OutputAhmedabad
  14. 14. Purchase Google Maps API, if Your site is only Your site is only accessible within your available to paying company or on your customers. intranet. Your application relates to enterprise dispatch, fleet management, business asset tracking, or similar applications. Ahmedabad
  15. 15. Usage Limits & Billing 1,000 excess Usage limitService map loads (per day) (in U.S. dollars)JS Maps API v3 25,000 $0.50JS Maps API v2 25,000 $1.00(Deprecated)Static Maps API 25,000 $0.50Street View Image 25,000 $0.50API Ahmedabad
  16. 16. For example, the API will fire azoom_changed event on a map when the maps zoom level changes. You can intercept these state changes by registering addListener() event handler Google Maps Events User Events MVC State Change • google.maps.marker • Whenever an objects object can listen to the property changes, the API following user events will fire an event that the • click property has changed. • dblclick • For example, the API will • mouseup fire a event on a map when the maps zoom level • mousedown changes. You can intercept • mouseover these state changes by • mouseout registering event handlers on the namespace method Ahmedabad
  17. 17. For example, the API will fire azoom_changed event on a map when the maps zoom level changes. You can intercept these state changes by registering addListener() event handler Google Maps Events User Events • google.maps.marker object can listen to the following user eventsEvents also typically • click pass arguments • dblclick • mouseup within the event • mousedown noting some UI state • mouseover (such as the mouse • mouseout position). Ahmedabad
  18. 18. For example, the API will fire azoom_changed event on a map when the maps zoom level changes. You can intercept these state changes by registering addListener() event handler Google Maps Events MVC State Change • MVC events do not pass arguments within their event. • You will want to inspect the property that changed on an MVC state change by calling the appropriate Property method on that object. Ahmedabad
  19. 19. Let’s perform an example pan-back-to- marker.html Ahmedabad
  20. 20. Arguments in UI Events UI events within the Google Maps API V3 typically pass an event argument, which can be accessed by the event listener For example, a UI event typically passes a containing a property denoting the clicked location on the map Lets perform an example which adds an event listener for the map, and creates a marker when the user clicks on the map at the clicked location. event-arguments.html Ahmedabad
  21. 21. Map Controls Zoom Pan Scale Street MapType Rotate View Overview Map Ahmedabad
  22. 22. Adding Controls to the Map function initialize() {{ var mapOptions = { panControl: boolean, zoom: 4, center: new google.maps.LatLng(- zoomControl: boolean, 33, 151), mapTypeControl: panControl: false,boolean, zoomControl: false, scaleControl: true, scaleControl: boolean, mapTypeId: streetViewControl: google.maps.MapTypeId.ROADMAPboolean, } var map = new overviewMapControl: google.maps.Map(document.getEleboolean mentById("map_canvas"),} mapOptions); } Ahmedabad
  23. 23. Let’s perform an example map-controls.html Ahmedabad
  24. 24. Maps – Styles and Syntax Map Features Stylers• Geographic elements • Color and visibility that can be targeted on properties that can be the map. These applied to map include roads, parks, features. They define bodies of water, and the display color more, as well as their through a combination labels. of hue, color, and lightness/gamma values. Ahmedabad
  25. 25. Map FeaturesThe following element types are supported:•all (default) selects all elements of that feature.•geometry selects all geometric elements of that feature. •geometry.fill selects only the fill of the features geometry. •geometry.stroke selects only the stroke of the features geometry.•labels selects only textual labels associated with that feature. •labels.icon selects only the icon displayed within the features label. •labels.text selects only the text of the label. •labels.text.fill selects only the fill of the label. The fill of a label is typically rendered as a colored outline that surrounds the label text. •labels.text.stroke selects only the stroke of the labels text. Ahmedabad
  26. 26. Map Features – Code SnippetThe following specification selects thelabels for all local roads:{ featureType: "road.local", elementType: "labels"} Ahmedabad
  27. 27. Map Stylers hue lightness Saturation gamma innverse_lightness visibility color weight Ahmedabad
  28. 28. Stylers – Code SnippetThe following specification selects thelabels for all local roads:stylers: [ { hue: "#00d4ff" }, { saturation: 60 }, { lightness: -20 }, { gamma: 1.51 }] Ahmedabad
  29. 29. Let’s perform two examples style-example.html style-example2.html Ahmedabad
  30. 30. The Styled Map Wizard http://gmaps-samples- v3.googlecode.com/svn/trun k/styledmaps/wizard/index.h tml Ahmedabad
  31. 31. Overlays Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map Ahmedabad
  32. 32. Overlays – To Learn Adding Removing Symbols Markers Overlays Overlays Simple Complex Polylines Polygons Icons Icons User- Circles and Editing Drawing Editable Rectangles Events Library Shapes Info Ground Custom Windows Overlays Overlays Ahmedabad
  33. 33. Let’s perform two examples simple-marker.html marker-animate.html Ahmedabad
  34. 34. Let’s perform two examples overlay.html overlay-remove.html Ahmedabad
  35. 35. Let’s perform three examples marker-icon.html polygon.html polyline.html Ahmedabad
  36. 36. LayersLayers are objects on the map that consist of one or more separate items, but are manipulated as a single unit. KML GeoRSS Heatmap Traffic Weather & Transit Bicycle Panoramio Cloud Ahmedabad
  37. 37. KML & GeoRSS LayersThe Google Maps API supports the KML and GeoRSS data formats fordisplaying geographic information.These data formats are displayed on a map using a KmlLayer object, whoseconstructor takes the URL of a publicly accessible KML or GeoRSS file. KML GeoRSS Ahmedabad
  38. 38. Let’s perform two examples kml-example.html georss.html Ahmedabad
  39. 39. Let’s code the examples foreachHeatmap Traffic Transit Weather & Bicycle Panoramio Cloud Ahmedabad
  40. 40. Keep MappingRitesh Ambastharitesh@iwillstudy.comFacebook.com/riteshambasthaTwitter.com/riteshambastha+91-9408098777

×