mapathon 2013 - google maps javascript api

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'


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.


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


simple-marker.htmlmarker-

animate.html

Ahmedabad


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


kml-example.htmlgeorss.html

Ahmedabad

Let’s code the examples for each

Heatmap

Traffic

Transit Bicycle

Ritesh [email protected]/riteshambasthaTwitter.com/riteshambastha+91-9408098777

Keep Mapping

mailto:[email protected]

mapathon 2013 - google maps javascript api

Education