mapathon 2013 - google maps javascript api
Post on 08-May-2015
1.000 Views
Preview:
DESCRIPTION
TRANSCRIPT
Ritesh Ambastha, iWillStudy.com, 9th March 2013
Ahmedabad
Google Maps API
JavaScript API v3
Maps API Web
Services
Google Places API
Static Maps API
Street View Image API
Earth API
Google Maps SDK for iOS
Maps Android API
Deprecated API
JavaScript API v3
Ahmedabad
Google Maps JavaScript API v3
Concepts Events Controls
Styles Overlays Layers
Map Types
Services Libraries
Ahmedabad
Getting Started
API Key APIs ConsoleHelloWorld Program
Ahmedabad
Obtain API Key
https://code.google.com/apis/console
Ahmedabad
Create Client ID
Ahmedabad
Client ID Settings
Let’s write the very first HTML
HelloWorld !!
Ahmedabad
Basic Terminology
•API Key•SensorScript
•<!DOCTYPE HTML>HTML5• var mapOptions = {
center: new google.maps.LatLng(22,72), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP};
Map Options
Ahmedabad
Basic Terminology
•ROADMAP•SATELLITE •HYBRID•TERRAIN
Map Types
• var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Map Object
• <body onload="initialize()">Load Map
Ahmedabad
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
6<!DOCTYPE html><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
Output
Ahmedabad
Purchase Google Maps API, ifYour site is only
available to paying
customers.
Your site is only accessible within your company or on your intranet.
Your application relates to enterprise dispatch,
fleet management, business asset tracking, or similar applications.
Ahmedabad
Usage Limits & Billing
ServiceUsage limit
(per day)
1,000 excess map loads
(in U.S. dollars)
JS Maps API v3 25,000 $0.50
JS Maps API v2 (Deprecated)
25,000 $1.00
Static Maps API 25,000 $0.50
Street View Image API
25,000 $0.50
Ahmedabad
Google Maps Events
User Events•google.maps.marker object can listen to the following user events•'click'•'dblclick'•'mouseup'•'mousedown'•'mouseover'•'mouseout'
MVC State Change
•Whenever an object's property changes, the API will fire an event that the property has changed. •For example, the API will fire a event on a map when the map's zoom level changes. You can intercept these state changes by registering event handlers on the namespace method
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 handlers on the eventnamespace metho
Ahmedabad
Google Maps Events
User Events
•google.maps.marker object can listen to the following user events•'click'•'dblclick'•'mouseup'•'mousedown'•'mouseover'•'mouseout'
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 handlers on the eventnamespace metho
Events also typically pass
arguments within the event noting
some UI state (such as the
mouse position).
Ahmedabad
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.
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 handlers on the eventnamespace metho
Ahmedabad
Let’s perform an example
pan-back-to-marker.html
Ahmedabad
Arguments in UI EventsUI events within the Google Maps API V3 typically pass an event argument, which can be accessed by the event listenerFor example, a UI event typically passes a containing a property denoting the clicked location on the mapLets 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
Map Controls
Zoom Pan Scale
MapType
Street View Rotate
Overview Map
Ahmedabad
Adding Controls to the Map{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl:
boolean}
function initialize() { var mapOptions = {
zoom: 4, center: new
google.maps.LatLng(-33, 151),
panControl: false, zoomControl: false, scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROA
DMAP }
var map = new google.maps.Map(document.getElementById("map_canva
s"), mapOptions);
}
Ahmedabad
Let’s perform an example
map-controls.html
Ahmedabad
Maps – Styles and Syntax
Map Features
•Geographic elements that can be targeted on the map. These include roads, parks, bodies of water, and more, as well as their labels.
Stylers•Color and visibility properties that can be applied to map features. They define the display color through a combination of hue, color, and lightness/gamma values.
Ahmedabad
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 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
Map Features – Code Snippet
The following specification selects the labels for all local roads:
{ featureType: "road.local", elementType: "labels"}
Ahmedabad
Map Stylers
hue lightness
Saturation
gamma innverse_lightness visibility
color weight
Ahmedabad
Stylers – Code Snippet
The following specification selects the labels for all local roads:
stylers: [ { hue: "#00d4ff" }, { saturation: 60 }, { lightness: -20 }, { gamma: 1.51 }]
Ahmedabad
Let’s perform two examples
style-example.htmlstyle-example2.html
Ahmedabad
The Styled Map Wizard
http://gmaps-samples-v3.googlecode.com/svn/
trunk/styledmaps/wizard/index.html
Ahmedabad
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
Overlays – To Learn
Adding Overlays
Removing Overlays Symbols Markers
Simple Icons
Complex Icons
Polylines
Polygons
Circles and Rectangles
User-Editable Shapes
Editing Events
Drawing Library
Info Windows
Ground Overlays
Custom Overlays
Ahmedabad
Let’s perform two examples
simple-marker.htmlmarker-
animate.html
Ahmedabad
Let’s perform two examples
overlay.htmloverlay-remove.html
Ahmedabad
Let’s perform three examples
marker-icon.htmlpolygon.htmlpolyline.html
Ahmedabad
Layers
KML GeoRSS
Heatmap
Traffic
Layers are objects on the map that consist of one or more separate items, but are manipulated as a
single unit.
Ahmedabad
KML & GeoRSS Layers
KML GeoRSS
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.
Ahmedabad
Let’s perform two examples
kml-example.htmlgeorss.html
Ahmedabad
Let’s code the examples for each
Heatmap
Traffic
Transit Bicycle
Ritesh Ambastharitesh@iwillstudy.comFacebook.com/riteshambasthaTwitter.com/riteshambastha+91-9408098777
Keep Mapping
top related