Google Maps API Styling
•Télécharger en tant que PPTX, PDF•
2 j'aime•1,874 vues
Session 1 PPT of Mapathon organized by Google Developers Group, Ahmedabad
Recommandé
Contenu connexe
En vedette
Similaire à Google Maps API Styling
Similaire à Google Maps API Styling (20)
Plus de NAILBITER
Plus de NAILBITER (20)
Dernier
Dernier (20)
Google Maps API Styling
- 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 Key https://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 • ROADMAP Map Types • SATELLITE • HYBRID • TERRAIN • var map = new Map 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. Output Ahmedabad
- 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 limit Service map loads (per day) (in U.S. dollars) JS Maps API v3 25,000 $0.50 JS Maps API v2 25,000 $1.00 (Deprecated) Static Maps API 25,000 $0.50 Street View Image 25,000 $0.50 API Ahmedabad
- 16. For example, the API will fire azoom_changed event on a map when the map's 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 object's 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 map's 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 map's 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 map's 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.ROADMAP boolean, } var map = new overviewMapControl: google.maps.Map(document.getEle boolean 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 Features The 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 feature's geometry. •geometry.stroke selects only the stroke of the feature's geometry. •labels selects only textual labels associated with that feature. •labels.icon selects only the icon displayed within the feature's 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 label's text. Ahmedabad
- 26. Map Features – Code Snippet The following specification selects the labels 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 Snippet The following specification selects the labels 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. Layers Layers 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 Layers The Google Maps API supports the KML and GeoRSS data formats for displaying geographic information. These data formats are displayed on a map using a KmlLayer object, whose constructor 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 for each Heatmap Traffic Transit Weather & Bicycle Panoramio Cloud Ahmedabad