gmaps.js - google maps api with less pain and more fun

gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Features include:

• Map events
• Geolocation
• Add Markers
• Marker infoWindows
• Draw routes and circles
• Initial examples
• Context menu (for map and marker only)
• Geocoding
• Geofence 
• Overlays
• Static maps
• Custom controls
• Fusion Tables
• KML and GeoRSS
• Elevation service
• Layers
• Map Types
•  Overlay Map Types
• Add RadarSearch to the places layer

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Using GMaps.js is as easy as:

new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});

You must define container ID, latitude andlongitude of the map's center.

You also can define zoom, width andheight. By default, zoom is 15. Width an height in a CSS class will replace these values.

Options:

div — HTMLDivElement

controls — Array

Collection of custom controls in the Map.

overlays — Array

layers — Array

singleLayers — Object

markers — Array

polylines — Array

routes — Array

polygons — Array

zoom — Integer

map — google.maps.Map

Native google.maps.Map object.

setContextMenu

Set a context menu for the entire Map or a marker.

setContextMenu accepts a hash of options.

Options:

Name	Type	Description
control	string	Control that the context menu is attached. Can be map or marker.
options	array	Collection of context menu items. Each item in this collection has three options.

 

Context menu item options:

Name	Type	Description
title	string	Text displayed in the menu item.
name	string	Unique name used by GMaps to build the menu item.
action	function	Action performed when user selects a context menu item. It takes 1 parameter, which contains the coordinate in the map where the context menu is displayed.

 

hideContextMenu

Hide current context menu displayed.

refresh

Trigger the resize event of a Map. Useful when the Map is created in a dynamic container

fitZoom

Fit zoom level to show all markers in the viewport.

fitBounds

Fit zoom level to show a bound of coordinates.

fitBounds accepts 1 parameter.

Parameters:

Name	Type	Description
latLngs	array	Array of google.maps.LatLng objects.

 

setCenter

Set center in the Map.

setCenter accepts 3 parameters.

Parameters:

Name	Type	Description
lat	float	Latitude of the coordinate.
lng	float	Longitude of the coordinate.
callback	function	Function that triggers after the map is centered.

 

getCenter

Get current coordinates of the center.

getDiv

Get div object described above.

setZoom

Set zoom level.

setZoom accepts 1 parameter.

Parameters:

Name	Type	Description
value	integer	New zoom value.

 

zoomIn

Increase zoom level.

zoomIn accepts 1 parameter.

Parameters:

Name	Type	Description
value	integer	Number of zoom level that the zoom is increased.

 

zoomOut

Decrease zoom level.

zoomOut accepts 1 parameter.

Parameters:

Name	Type	Description
value	integer	Number of zoom level that the zoom is decreased.

 

addControl

Add a control in the Map UI.

addControl accepts a hash of options.

Options:

Name	Type	Description
content	string	HTML content for the control
id	string	ID of the DOM element
classes	string	List of CSS clases of the DOM element
position	string	Position in the Map UI where the control is placed: TOP_CENTER TOP_LEFT TOP_RIGHT LEFT_TOP RIGHT_TOP LEFT_CENTER RIGHT_CENTER LEFT_BOTTOM RIGHT_BOTTOM BOTTOM_CENTER BOTTOM_LEFT BOTTOM_RIGHT
style	object	Hash of CSS styles applied to the control.
events	object	Hash of events bound to the control.

 

Control event options:

Name	Type	Description
name	string	Name of the event.
event	function	Function attached to the event.

 

createMarker

Create a marker and return it.

createMarker accepts a hash of options.

Options

Name	Type	Description
lat	float	Latitude of the coordinate.
lng	float	Longitude of the coordinate.
details	object	Custom object with extra data.
fences	array	Collection of google.maps.Polygon objects.
outside	function	Callback fired when the marker is oustide any of its fences.
infoWindow	object	Object with all options defined in google.maps.InfoWindowOptions.

 

Also, createMarker accepts any option defined in google.maps.MarkerOptions and any marker event defined in google.maps.Marker ('Events' section).

addMarker

Create a marker and add it in the Map and the markers collection.

addMarker accepts the same options of createMarker.

addMarkers

Add a collection of markers.

addMarkers accept one parameter, which is an array of the same options used in addMarker.

hideInfoWindows

Hide all infoWindows shown in the Map.

removeMarkers

Delete all markers and clear the markers collection.

drawOverlay

Draw a HTML overlay and add it in the Map.

drawOverlay accepts a hash of options.

Options

Name	Type	Description
lat	float	Latitude of the coordinate where the overlay is placed.
lng	float	Longitude of the coordinate where the overlay is placed.
content	string	HTML that will be drawn in the overlay.
layer	string	Id of any of the layers defined in google.maps.MapPanes: floatPane floatShadow mapPane overlayImage overlayLayer overlayMouseTarget overlayShadow
verticalAlign	string	Vertical align of the overlay (where the center is the coordinate lat, lng): top middle bottom
horizontalAlign	string	Horizontal align of the overlay (where the center is the coordinate lat, lng): left center right
horizontalOffset	integer	Horizontal offset in pixels of the overlay.
verticalOffset	integer	Vertical offset in pixels of the overlay.

 

removeOverlay

Delete a overlay.

removeOverlay accepts 1 parameter, which is a google.maps.OverlayView object.

removeOverlays

Delete all overlays.

drawPolyline

Draw a polyline and add it in the Map and the polylines collection.

drawPolyline accepts a hash of options.

Options

Name	Type	Description
path	array	Collection of coordinates (which can be either an array [lat, lng] or a google.maps.LatLng object).
strokeColor	string	Color of the polyline. Can be hexadecimal or CSS name.
strokeOpacity	float	Opacity of the polyline from 0.0 to 1.0
strokeWeight	integer	Polyline width in pixels.

 

Also, drawPolyline accepts any event defined in google.maps.Polyline ('Events' section).

drawCircle

Draw a circle and add it in the Map.

drawCircle accepts a hash of options.

Options

Name	Type	Description
lat	float	Latitude of the coordinate.
lng	float	Longitude of the coordinate.

Also, drawCircle accepts any option defined in google.maps.CircleOptions and any event defined in google.maps.Circle ('Events' section).

 

drawRectangle

Draw a rectangle and add it in the Map.

drawRectangle accepts a hash of options.

Options

Name	Type	Description
bounds	array	Bi-dimensional array of latitudes and longitudes

 

Also, drawRectangle accepts any option defined in google.maps.RectangleOptions and any event defined in google.maps.Rectangle ('Events' section).

drawPolygon

Draw a polygon and add it in the Map and the polygons collection.

drawPolygon accepts a hash of options.

Options

Name	Type	Description
paths	array	Bi-dimensional array of latitudes and longitudes

 

Also, drawPolygon accepts any option defined in google.maps.PolygonOptions and any event defined in google.maps.Polygon ('Events' section).

loadFromFusionTables

Get data from a Fusion Tables table and create the layer in the Map.

loadFromFusionTables accepts a hash of options.

Options

Name	Type	Description
events	object	Hash of events defined in google.maps.FusionTablesLayer ('Events' section).

 

Also, loadFromFusionTables accepts any option defined in google.maps.FusionTablesLayerOptions.

loadFromKML

Get data from a KML file or a GeoRSS file and create the layer in the Map.

loadFromKML accepts a hash of options.

Options

Name	Type	Description
url	string	URL of the source
events	object	Hash of events defined in google.maps.KmlLayer ('Events' section).

 

Also, loadFromKML accepts any option defined in google.maps.KmlLayerOptions.

getRoutes

Get routes between two coordinates.

getRoutes accepts a hash of options.

Options

Name	Type	Description
origin	array	Array with two elements: latitude and longitude
destination	array	Array with two elements: latitude and longitude
callback	function	Function that fires after the results are returned.

 

Also, getRoutes accepts any option defined in google.maps.DirectionsRequest.

getElevations

Get elevation information of locations or routes.

getElevations accepts a hash of options.

Options

Name	Type	Description
locations	array	Bi-dimensional array of latitudes and longitudes
path	boolean	If is true, makes a request along a path. If is false, only on discrete locations
callback	function	Native callback function defined in google.maps.ElevationService ('Methods' section)

 

removePolylines

Delete all polylines.

drawRoute

Draw a route using polylines.

drawRoute accepts a hash of options.

Options

Name	Type	Description
origin	array	Array with two elements: latitude and longitude
destination	array	Array with two elements: latitude and longitude
travelMode	string	Can be driving, bicycling or walking.
waypoints	array	Array of google.maps.DirectionsWaypoint objects.
strokeColor	string	Color of the polyline. Can be hexadecimal or CSS name.
strokeOpacity	float	Opacity of the polyline from 0.0 to 1.0
strokeWeight	integer	Polyline width in pixels.

 

cleanRoute

Alias for removePolylines.

travelRoute

Travel a route automatically.

travelRoute accepts a hash of options.

Options

Name	Type	Description
origin	array	Array with two elements: latitude and longitude
destination	array	Array with two elements: latitude and longitude
travelMode	string	Can be driving, bicycling or walking.
waypoints	array	Array of google.maps.DirectionsWaypoint objects.
route	google.maps.DirectionsRoute	google.maps.DirectionsRoute object.
start	function	Fired before the first step. It pass a single parameter, which is a DirectionsRoute object.
step	function	Fired each step in the route. It pass 2 parameters, which is a DirectionsStep object and the total length of the steps.
end	function	Fired after the last step. It pass a single parameter, which is a DirectionsRoute object.

 

drawSteppedRoute

Draw and travel a route automatically step by step.

drawSteppedRoute accepts a hash of options.

Options

Name	Type	Description
origin	array	Array with two elements: latitude and longitude
destination	array	Array with two elements: latitude and longitude
travelMode	string	Can be driving, bicycling or walking.
waypoints	array	Array of google.maps.DirectionsWaypoint objects.
route	google.maps.DirectionsRoute	google.maps.DirectionsRoute object.
strokeColor	string	Color of the polyline. Can be hexadecimal or CSS name.
strokeOpacity	float	Opacity of the polyline from 0.0 to 1.0
strokeWeight	integer	Polyline width in pixels.
start	function	Fired before the first step. It pass a single parameter, which is a DirectionsRoute object.
step	function	Fired each step in the route. It pass 2 parameters, which is a DirectionsStep object and the total length of the steps.
end	function	Fired after the last step. It pass a single parameter, which is a DirectionsRoute object.

 

checkGeofence

Check if a coordinate is inside or outside of a geofence.

Use three arguments and return true or false depending if a coordinate is inside or outside a geofence.

Arguments

Name	Type	Description
lat	float	Latitude of the coordinate
lng	float	Longitude of the coordinate
fence	google.maps.Polygon	Any polygon drawn in the map

 

checkMarkerGeofence

Trigger a callback when a marker is outside its geofences.

Arguments

Name	Type	Description
marker	google.maps.Marker	Marker created with addMarker.
outside_callback	function	Function that triggers at each marker fence (defined with fences option in addMarker).

 

addLayer

Add a layer to the maps.

Arguments

Name	Options	Description
LayerName	string	The name of the layer. e.g weather, clouds, transit, traffic, bicycling, panoramio, places
options	object	An object with options for the layer.  Places specific nearbySearch : Callback : PlaceSearchRequest Object search : Callback : Alias for nearbySearch textSearch : Callback : TextSearchRequest Object

 

removeLayer

Remove a layer from the maps.

Arguments

Name	Options	Description
LayerName	string	The name of the layer. e.g weather, clouds, transit, traffic, bicycling, panoramio, places

 

Maps

• Basic

• Map events

• Markers

Services

• Geolocation

• Geocoding

Overlays

• Polylines

• Overlays

• Polygon

• GeoJSON Polygon

Routes

• Routes

• Routes (advanced)

• GMaps.Route

Static maps

• Static maps

• With markers

• With polylines

Utils

• Context menu

• Geofences

• Custom controls

• Fusion Tables layers

• KML and GeoRSS layers

• Map Types

• Overlay Map Types

• Street View Panoramas

• Interacting with UI

• Working with JSON