Google Maps API Addons
What you're seeing here is a compilation of scripts that enhance the functionalities of the Google Maps API (currently in Version 3) in different ways.
All scripts are open-source, licensed under the Apache License, Version 2 (see LICENSE for details). Feel free to use the scripts in your own projects or modify them according to your needs.
Live Examples
There's a variety of examples for you to better evaluate the addons presented in this repository:
Reference Table of Contents
SimpleMarker
DayNightOverlay
PanoMarker
SimpleMarker class
A lightweight marker class, based on the lightweight marker sample by google but trimmed down to my needs even more.
This class extends google.maps.OverlayView.
Constructor
| Constructor |
Description |
SimpleMarker(opts?:SimpleMarkerOptions) |
Creates a SimpleMarker with the options specified. If a map is specified, the marker is added to the map upon construction. |
Methods
| Methods |
Return Value |
Description |
getAnchor() |
google.maps.Point |
|
getBounds(zoom?:number) |
google.maps.LatLngBounds |
This method returns the bounds of our marker in latitude and longitude values, based on the current or given zoom value of the map. You can use these bounds for a clustering algorithm, as you can now easily check if a LatLng-coordinate is inside the marker's bounds (i.e. the two objects overlap) or not. |
getClassName() |
string |
|
getIcon() |
string |
|
getId() |
string |
|
getMap() |
google.maps.Map |
|
getPosition() |
google.maps.LatLng |
|
getSize() |
google.maps.Size |
|
getTitle() |
string |
|
getVisible() |
boolean |
|
setAnchor(anchor:google.maps.Point) |
None |
|
setClassName(className:string) |
None |
|
setIcon(icon?:string) |
None |
|
setId(id:string) |
None |
|
setMap(map:google.maps.Map) |
None |
Renders the marker on the specified map. If map is set to null, the marker will be removed. |
setPosition(position:google.maps.LatLng) |
None |
|
setSize(size:google.maps.Size) |
None |
|
setTitle(title:string) |
None |
|
setVisible(visible:boolean) |
None |
|
Static Methods
| Methods |
Return Value |
Description |
getLatLngPerPixel(zoom?:number) |
google.maps.LatLng |
Calculates the Latitude/Longitude per pixel ratio based on the given zoom. |
Events
| Events |
Arguments |
Description |
click |
MouseEvent |
This event is fired when the marker icon was clicked. |
SimpleMarkerOptions object specification
Properties
| Properties |
Type |
Description |
anchor |
google.maps.Point |
The point (in pixels) to which objects will snap. |
className |
string |
The class name which will be assigned to the created div node. |
icon |
string |
URL to an image file that shall be used. |
id |
string |
A unique identifier that will be assigned to the created div-node. |
map |
google.maps.Map |
Map on which to display marker. |
position |
google.maps.LatLng |
Marker position. |
size |
google.maps.Size |
The size of the marker in pixels. |
title |
string |
Rollover text. |
visible |
boolean |
If true, the marker is visible. |
DayNightOverlay class
This class extends google.maps.OverlayView.
Constructor
| Constructor |
Description |
DayNightOverlay(opt_params:DayNightOverlayOptions=) |
The Class which represents the Overlay. |
Methods
| Methods |
Return Value |
Description |
setDate(date:Date) |
None |
Pass a specific point in time for which the day/night-overview shall be calculated (UTC date is taken) or null if the current time shall be taken. |
DayNightOverlayOptions object specification
This class represents the optional parameter passed to the DayNightOverlay constructor. There is no constructor for this class. Instead, this class is instantiated as a javascript object literal.
Properties
| Properties |
Type |
Description |
date |
Date |
A specific point of time for which the day/night-
overview shall be calculated (UTC date is taken). |
fillColor |
string |
A color string that will be used when drawing
the night area. |
id |
string |
A unique identifiert which will be assigned to the
canvas on which we will draw. |
map |
google.maps.Map |
A handle to the Google Maps map on which the
overlay shall be shown. |
smallZoomThreshold |
number |
A threshold for small zoom levels on viewports with small dimensions. |
PanoMarker class
This class extends google.maps.OverlayView.
Constructor
| Constructor |
Description |
PanoMaker(opts?:PanoMarkerOptions) |
Creates a PanoMarker with the options specified. If a panorama is specified, the marker is added to the map upon construction. Note that the position must be set for the marker to display. Important: do not use the inherited method setMap() to change the panorama, but use setPano() instead, otherwise a proper functionality is not guaranteed. |
Methods
Static Methods
| Methods |
Return Value |
Description |
getFov(zoom:number) |
number |
The (horizontal) field of view angle for the given zoom. |
povToPixel(targetPov:google.maps.StreetViewPov, currentPov:google.maps.StreetViewPov, viewport:Element) |
Object({left:number, top:number}) |
Given the current POV, this method calculates the Pixel coordinates on the given viewport for the desired POV. All credit for the math this method goes to user3146587 on StackOverflow: goo.gl/0GGKi6 |
Events
| Events |
Arguments |
Description |
click |
MouseEvent |
This event is fired when the marker icon was clicked. |
PanoMarkerOptions object specification
Properties
| Properties |
Type |
Description |
anchor |
google.maps.Point |
The point (in pixels) to which objects will snap. |
className |
string |
The class name which will be assigned to the created div node. |
icon |
string |
URL to an image file that shall be used. |
id |
string |
A unique identifier that will be assigned to the created div-node. |
pano |
google.maps.StreetViewPanorama |
Panorama in which to display marker. |
position |
google.maps.StreetViewPov |
Marker position. |
size |
google.maps.Size |
The size of the marker in pixels. |
title |
string |
Rollover text. |
visible |
boolean |
If true, the marker is visible. |
zIndex |
number |
The marker's z-index. |