Your SlideShare is downloading. ×
Mapathon 2013 - Google Maps Javascript API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mapathon 2013 - Google Maps Javascript API

969
views

Published on

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

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
969
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ritesh Ambastha,iWillStudy.com, 9th March 2013
  • 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. Google Maps JavaScript API v3 Concepts Events Controls Styles Overlays Layers Map Services Libraries Types Ahmedabad
  • 4. Getting Started APIs HelloWorld API Key Console Program Ahmedabad
  • 5. Obtain API Keyhttps://code.google.com/apis/console Ahmedabad
  • 6. Create Client ID Ahmedabad
  • 7. Client ID Settings Ahmedabad
  • 8. HelloWorld !!Let’s write the very first HTML
  • 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. 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. 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. <!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. OutputAhmedabad
  • 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. 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. 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. 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. 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. Let’s perform an example pan-back-to- marker.html Ahmedabad
  • 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. Map Controls Zoom Pan Scale Street MapType Rotate View Overview Map Ahmedabad
  • 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. Let’s perform an example map-controls.html Ahmedabad
  • 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. 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. Map Features – Code SnippetThe following specification selects thelabels for all local roads:{ featureType: "road.local", elementType: "labels"} Ahmedabad
  • 27. Map Stylers hue lightness Saturation gamma innverse_lightness visibility color weight Ahmedabad
  • 28. Stylers – Code SnippetThe following specification selects thelabels for all local roads:stylers: [ { hue: "#00d4ff" }, { saturation: 60 }, { lightness: -20 }, { gamma: 1.51 }] Ahmedabad
  • 29. Let’s perform two examples style-example.html style-example2.html Ahmedabad
  • 30. The Styled Map Wizard http://gmaps-samples- v3.googlecode.com/svn/trun k/styledmaps/wizard/index.h tml Ahmedabad
  • 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. 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. Let’s perform two examples simple-marker.html marker-animate.html Ahmedabad
  • 34. Let’s perform two examples overlay.html overlay-remove.html Ahmedabad
  • 35. Let’s perform three examples marker-icon.html polygon.html polyline.html Ahmedabad
  • 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. 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. Let’s perform two examples kml-example.html georss.html Ahmedabad
  • 39. Let’s code the examples foreachHeatmap Traffic Transit Weather & Bicycle Panoramio Cloud Ahmedabad
  • 40. Keep MappingRitesh Ambastharitesh@iwillstudy.comFacebook.com/riteshambasthaTwitter.com/riteshambastha+91-9408098777

×