Downloaded 67 times
![Stylers – Code Snippet
The following specification selects the
labels for all local roads:
stylers: [
{ hue: "#00d4ff" },
{ saturation: 60 },
{ lightness: -20 },
{ gamma: 1.51 }
]
Ahmedabad](https://image.slidesharecdn.com/mapathongdg-130308073523-phpapp01/85/Mapathon-2013-Google-Maps-Javascript-API-28-320.jpg)
![Stylers – Code Snippet
The following specification selects the
labels for all local roads:
stylers: [
{ hue: "#00d4ff" },
{ saturation: 60 },
{ lightness: -20 },
{ gamma: 1.51 }
]
Ahmedabad](https://image.slidesharecdn.com/mapathongdg-130308073523-phpapp01/75/Mapathon-2013-Google-Maps-Javascript-API-28-2048.jpg)
Uploaded byNAILBITER
Mapathon 2013 - Google Maps Javascript API
The document discusses various Google Maps APIs and concepts. It provides an overview of the Google Maps JavaScript API, how to obtain an API key, and includes a basic "HelloWorld" example to load a map. It also covers various map types, controls, overlays, layers, and styles. Code snippets are provided for working with events, controls, overlays and custom styles. The document recommends some examples to try out the different features.
More Related Content
Similar to Mapathon 2013 - Google Maps Javascript API
Mapathon 2013 - Google Maps Javascript API
- 1. Ritesh Ambastha, iWillStudy.com, 9thMarch 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 JavaScriptAPI v3 Concepts Events Controls Styles Overlays Layers Map Services Libraries Types Ahmedabad
- 4. Getting Started APIs HelloWorld API Key Console Program Ahmedabad
- 5.
- 6. Create Client ID Ahmedabad
- 7. Client ID Settings Ahmedabad
- 8. HelloWorld !! Let’s writethe 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.
- 14. Purchase Google MapsAPI, 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, theAPI 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, theAPI 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, theAPI 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 anexample pan-back-to- marker.html Ahmedabad
- 20. Arguments in UIEvents 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 tothe 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 anexample map-controls.html Ahmedabad
- 24. Maps – Stylesand 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 followingelement 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 – CodeSnippet 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 twoexamples style-example.html style-example2.html Ahmedabad
- 30. The Styled MapWizard http://gmaps-samples- v3.googlecode.com/svn/trun k/styledmaps/wizard/index.h tml Ahmedabad
- 31. Overlays Overlays areobjects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map Ahmedabad
- 32. Overlays – ToLearn 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 twoexamples simple-marker.html marker-animate.html Ahmedabad
- 34. Let’s perform twoexamples overlay.html overlay-remove.html Ahmedabad
- 35. Let’s perform threeexamples marker-icon.html polygon.html polyline.html Ahmedabad
- 36. Layers Layers are objectson 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 & GeoRSSLayers 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 twoexamples kml-example.html georss.html Ahmedabad
- 39. Let’s code theexamples for each Heatmap Traffic Transit Weather & Bicycle Panoramio Cloud Ahmedabad
- 40.