Maps presented below are created using Gmaps.js library. Gmaps.js allows you to use the potential of Google Maps in a simple way.

Basic example

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

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

Map types are defined in the mapType property. Allowed values are: roadmap (default), satellite, hybrid and terrain.

Markers · 5 things not to miss in San Francisco

latitude and longitude are required. You can also attach additional information with details, which will be passed to Event object (e) in the events previously defined.

Markers with click event.

Polylines

The path of the polyline is defined by an array of array of two (latitude and longitude).

The example creates a 3-pixel-wide red polyline showing the path of William Kingsford Smith's first trans-Pacific flight between Oakland, CA, and Brisbane, Australia.

Polygons · Bermuda triangle

The path of a polygon can be defined as an array of google.maps.LatLng objects, or arrays of coordinates, with index 0 and 1 as, respectively, latitude and longitude (as in the example).

Also, you can add a GeoJSON Polygon or MultiPolygon path using useGeoJSON: true.

Route between two points

From: Golden Gate Park To: Golden Gate Bridge

You must define two points ( origin and destination) and color, opacity and weight of the route in the map.

Also, you can define a travelMode: driving, bicycling or walking. Default is walking.

Routes (step by step)

From: Golden Gate Park To: Golden Gate Bridge

Same as drawRoute, you must define an origin, destination and travelMode. Also, you must define the function that GMaps will call every step in the route.

Map Types (Open Street Map)

You can define many map types from external map services, like OpenStreetMap.

You must define a function called getTileUrl, which returns a tile URL according the coordenates in the map.

Buy Elephant Now!
  • Theme Settings
  • Header fixed
  • Sidebar fixed
  • Sidebar sticky*
  • Sidebar collapsed
  • Footer fixed
  • Sidebar sticky* - by scrolling up and down the page, the menu placed on the sidebar moves along with the content until the bottom of the menu is reached. Learn more