1 of 27

For-profit web sites are permitted to generate up to 25000 map loads per day
https://developers.google.com/maps/documentation/javascript/usage?hl=pl#usage_limits
Using an API key enables you to monitor your application's Maps API usage

7 of 27

Obtaining an API key

To create your API key:

Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
Create a new project if necessary
Click the Services link from the left-hand menu.
Activate the Google Maps API v3 service.
Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
You can specify which domains are allowed to use your API key by clicking the Edit allowed referrers

8 of 27

Obtaining an API key

9 of 27

Initialization

Declare the app as HTML5
Create a <div> to be a map container
Load Google Maps API providing key and sensor parameters
Create mapOptions object with properties:

center
zoom
mapTypeId

Create google.maps.Map object passing div container and mapOptions as parameters

https://developers.google.com/maps/documentation/javascript/tutorial?hl=pl

https://developers.google.com/maps/documentation/javascript/training/fundamentals/adding-a-google-map

10 of 27

Localization

Language localization

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=ja">

Region localization

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&region=GB">

11 of 27

Basic elements of the API

12 of 27

Overlays

Markers
Info windows
Symbols
Polylines
Polygons
Circles and Rectangles
User-Editable shapes
Drawing library
Ground and custom overlays

13 of 27

Markers

Marker
MarkerOptions
Can be animated
Simple icons (*.png)
Complex icons (shadows, z-index)
https://developers.google.com/maps/documentation/javascript/overlays?hl=pl#AddingOverlays

14 of 27

Symbols

Symbol is a vector based image
Can be displayed on Marker or Polyline object
Defined by path - using SVG path notation
Several predefined symbols are available via the SymbolPath class

15 of 27

Info Windows

google.maps.InfoWindow
google.maps.InfoWindowOptions
google.maps.event.addListener(MARKER, EVENT, CALLBACK_FUNCTION)
content may contain:

simple text
HTML snippet
DOM element

16 of 27

Polylines

Polyline consists of an array of LatLng locations
Styling

strokeColor
strokeOpacity
strokeWeight

might be editable by users

https://developers.google.com/maps/documentation/javascript/overlays?hl=pl#PolylineSymbols

17 of 27

Polyline arrays

Polyline's method getPath() returns array of type MVCArray
Available operation of MVCArray

getAt()
insertAt()
removeAt()

https://developers.google.com/maps/documentation/javascript/overlays?hl=pl#PolylineArrays

18 of 27

Symbols on Polylines

Add vector based images (symbols) to a polyline
Set the icons[] property of the PolylineOptions
Elements of icons[] - IconSequence

fixedRotation
icon
offset
repeat

Animate by changing offset

https://developers.google.com/maps/documentation/javascript/overlays?hl=pl#PolylineSymbols

19 of 27

Polygons

Similar to Polyline but instead of being open-ended, polygons define regions within a closed loop
Complex shapes, discontinuities, "donuts", intersections
May be editable
Contain multiple paths
paths property specifies an "array of arrays"

https://developers.google.com/maps/documentation/javascript/overlays?hl=pl#Polygons

20 of 27

Circles and Rectangles

Circle and Rectangle simplified classes
No need to define paths
May be editable
Circle

center (google.maps.LatLng)
radius (in meters)

Rectangle

bounds (google.maps.LatLngBounds)

21 of 27

Geocoding

Convert address "Rynek Główny 12, Kraków, Polska" into geographic coordinates (50.06061,19.937954)
For static, known addresses use web service
It's asynchronous - you need to pass a callback method
Geocoder, GeocoderRequest, GeocoderResult
geocoder.geocode - with 'address' attribute