google maps javascript api v3

This document lists Google Maps API v3 javascript examples, sometimes in relation with a specific stackoverflow question.

All my fiddles can be found on my dashboard

Map

• Maps API v3 base map

  • The very base map

• Maps API v3 Styled Map Types

  • Create a Styled Map and the corresponding MapTypeId
  • A great tool for generating styled maps: The Styled Map Wizard

• Maps API v3 Map resize

  • Trigger a map resize when the map canvas is displayed

• Maps API v3 Bootstrap modal & map resize

  • Trigger a map resize when map is shown in a Bootstrap modal
  • http://stackoverflow.com/questions/29875472

• Maps API v3 4 quarters of the projection

  • Display all 4 quarters of the map projection and use a formula to find the real north and south edges of the projection
  • http://stackoverflow.com/questions/27107440

• Maps API v3 Marker in each corner

  • Place a marker in each of the map corners

• Maps API v3 map quarters, find where marker lies

  • Divide the map viewport in 4 quarters and check in which quarter a marker lies
  • https://stackoverflow.com/questions/57058930

• Maps API v3 Center map from user input

  • Center map on user input coordinates with validation

• Maps API v3 Custom scale control

  • Create a custom scale control
  • https://stackoverflow.com/q/53159975/1238965

• Maps API v3 Night Overlay

  • Adds a day/night overlay using the Nite Overlay library

Events

• Maps API v3 Handle single and double click events
  • How to handle single and double click events simultanously
  • https://stackoverflow.com/questions/56888891

Marker

• Maps API v3 Add and remove markers

  • Add and remove a set of markers from the map by the use of a markers array
  • http://stackoverflow.com/questions/28413791

• Maps API v3 markers setInterval

  • Drop markers at a defined time interval

• Maps API v3 Marker stick within bounds

  • With a non-draggable map, make a marker stick within the map bounds

• Maps API v3 Repeat draggable marker at low zoom levels

  • By default, draggable markers are not repeated on the map when world map is smaller than canvas area. This is a quick fix that adds a non draggable marker to mimic the non draggable behavior.

• Maps API v3 Create random markers

  • Create markers at random locations within defined bounds

• Maps API v3 Loop through markers and center map

  • Center map on each marker with by clicking on a button

• Maps API v3 SVG markers increase in size

  • Increase marker icon size every time a marker is added to the map

• Maps API v3 Fit map to markers bounds

  • Extend a bounds object with each marker position and fit the map to these bounds
  • http://stackoverflow.com/questions/28716921

• Maps API v3 Filter markers by groups

  • Read JSON data and push markers to arrays by group

• Maps API v3 MarkerClusterer

  • Clustering a good amount of markers on a map

• Maps API v3 HTML Marker (Custom Overlay)

  • Create a custom HTML Marker by implementing OverlayView class

Infowindow

• Maps API v3 Infowindow scroll

  • Add a nice scrolling to Infowindow

• Maps API v3 Twitter in Infowindow

  • Embed a tweet in an Infowindow

• Maps API v3 Marker with Infowindow in Street View panorama

  • Opens an Infowindow on a Street View panorama marker
  • https://stackoverflow.com/questions/48839938

• Maps API v3 Multiple markers with single Infowindow

  • Draw multiple markers that share a common Infowindow object

• Maps API v3 Multiple markers with single Infowindow (Closure version)

  • Draw multiple markers that share a common Infowindow object (Closure version)
  • Google Documentation: Using closures in event listeners

Polyline

• Maps API v3 Symbol cut on tile edge

  • Predefined and custom polyline symbols are cut off on tiles edges
  • http://stackoverflow.com/questions/24853312
  • Bug report: https://code.google.com/p/gmaps-api-issues/issues/detail?id=6916

• Maps API v3 set and remove polyline points

  • Add and remove polyline points with map interactions
  • http://stackoverflow.com/questions/31052749/

Shapes

• Maps API v3 Subtract triangle from rectangle

  • Subtract a shape from another one
  • http://stackoverflow.com/questions/28233018

• Maps API v3 Circle between 3 markers

  • Draw a cricle that touches 3 markers

• Maps API v3 Circle to shortest map canvas segment

  • Create a circle that fits the shortest side of the map canvas http://stackoverflow.com/questions/29739964

• Maps API v3 Polygon events

  • Listen to editable Polygon events (set_at, insert_at, remove_at)
  • http://stackoverflow.com/questions/29176269

• Maps API v3 allow to edit rectangle and expand further left or right

  • Rectangles cannot be edited further left/right of 50% of the remaining distance to 360°
  • https://stackoverflow.com/a/52517844/1238965

• Maps API v3 display Polygon bounding box

  • Draw a Polygon, get its paths and extend a LatLngBounds object to define a bounding box

Data Layer

• Maps API v3 Data layer remove feature

  • Load geojson data and manipulate the features

• Maps API v3 Data layer manipulate single feature

  • Manipulate one feature in a feature collection (show/hide) independently from other features

Custom controls

• Maps API v3 Custom Control and geolocation

  • Add a custom control to center map on user location.
  • http://stackoverflow.com/questions/28998743

• Maps API v3 Custom Zoom control

  • Add a custom zoom control
  • https://stackoverflow.com/q/54901509/1238965

Geocoder Service

• Maps API v3 Reverse geocoding

  • Reverse geocode coordinates on a map

• Maps API v3 Drag & drop locations on the map

  • Geocode an address by dragging and dropping a label on the map

• Maps API v3 Drag & drop locations on the map & place search box

  • Geocode an address by dragging and dropping a label on the map (includes Places Search Box)

• Maps API v3 Geocoder component restrictions

  • Restrict geocoder to a specific country
  • http://stackoverflow.com/questions/26528744
  • Feature request: filter by multiple countries

Directions Service

• Maps API v3 Directions simple

  • Simple use of the Directions service

• Maps API v3 Directions from/to buttons

  • Get directions from InfoWindow buttons
  • https://stackoverflow.com/q/53110741/1238965

• Maps API v3 Directions Waypoints

  • Directions service with waypoints and custom markers

• Maps API v3 Directions with clickable Waypoints

  • Directions service with waypoints and custom clickable markers.
  • https://stackoverflow.com/questions/57023259

• Maps API v3 Directions with draggable waypoints

  • Directions service with draggable waypoints and custom markers.

• Maps API v3 Directions routes and steps

  • Get all routes (alternates) steps and show them on the map
  • http://stackoverflow.com/questions/27700844

• Maps API v3 Directions change polyline color

  • Change the driving directions polyline color on the fly
  • http://stackoverflow.com/questions/27700844

• Maps API v3 Directions dotted polyline

  • Draw a dotted polyline for map Directions

• Maps API v3 Directions with custom draggable markers

  • Custom draggable markers to edit a Directions (with snap to road function)

• Maps API v3 Draggable directions with alternate routes

  • Displays directions alternatives with the ability to redraw routes when directions changed.
  • http://stackoverflow.com/questions/41999828

• Maps API v3 Directions with InfoWindow

  • Bind an InfoWindow to a Directions route by manually rendering the route

• Maps API v3 Directions with InfoWindow with directions instructions

  • Bind an InfoWindow to a Directions route by manually rendering the route and displaying each step instructions

• Maps API v3 Directions with InfoWindow with distance from start

  • Bind an InfoWindow to a Directions route by manually rendering the route and displaying distance from start
  • Warning: this uses the overview Polyline which is less accurate than rendering each step Poyline
  • Credits for distance calculation go to https://stackoverflow.com/a/9491592/1238965

• Maps API v3 Directions with custom Polyline and Markers every 10 km

  • Draw a Polyline from Directions overview path and place a Marker along the route every 10 km

• Maps API v3 Directions legs and steps duration

  • Legs come with "duration in traffic" but steps don't. This illustrates the differences between the 2 depending on what traffic model is used.

Street View Service

• Maps API v3 Map & StreetView

  • StreetView panorama with default UI disabled

• Maps API v3 Marker in Street View

  • Place a Marker on a Street View and toggle between map and Street View

• Maps API v3 Street View coverage layer

  • Shows Street View coverage on a map, like on Google Maps when clicking on the pegman

Elevation Service

• Maps API v3 Elevation Service
  • Simple example use of the Elevation Service

Geometry Library

• Maps API v3 get heading between 2 points

  • Calculate the heading between 2 coordinates using the Geometry library

• Maps API v3 distance via API and Haversine formula

  • Explicitly shows differences in calculation of a distance via the API geometry spherical methods and local Haversine calculation

Places Library

• Maps API v3 Search Nearby Places

  • Search for nearby places using the Places Service

• Maps API v3 Nearby place search and setInterval

  • Drop place search result markers at a defined time interval
  • http://stackoverflow.com/questions/29739752

• Maps API v3 Places Autocomplete

  • Simple Places API autocomplete field

• Maps API v3 Places Autocomplete set restrictions

  • Set country component restrictions on the fly

• Maps API v3 Places Search Box

  • Use the searchBox class to perform a place serach and display results as markers

• Maps API v3 Places Autocomplete Predictions

  • Biaise autocomplete results based on location and retrieve predictions

• Maps API v3 Place Search trigger

  • Trigger a place search from a button
  • http://stackoverflow.com/questions/19113477

• Maps API v3 Places Autocomplete Predictions from 2 fields

  • Retrieve query predictions based on 2 input fields, render predictions with search highlighting
  • http://stackoverflow.com/questions/28566699

• Maps API v3 Places Autocomplete Predictions simple

  • Same as above but not as much style and a single field.

• Maps API v3 Places Autocomplete Predictions with custom addresses

  • Same as above but with inserting custom addresses on top of the returned predictions
  • https://stackoverflow.com/q/49671434/1238965

Styling the map

• Maps API v3 Simple styled map

  • Maps API v3 Simple styled map

• Maps API v3 Changing styles per zoom level

  • Change map sytles depending on zoom level

• Maps API v3 Toggle styles

  • Toggle different feature types with checkboxes
  • http://stackoverflow.com/questions/28081912

• Maps API v3 Change styles

  • Change different feature types and elements with checkboxes
  • https://stackoverflow.com/questions/50859362/

• Maps API v3 Rounded styled map above base map & sync

  • Hack to display a styled map of a rounded shape above a standard map
  • http://stackoverflow.com/questions/28413474

Map Types

• Maps API v3 OpenStreetMap tiles over Google Maps

  • Embed OSM tiles over Google Maps

• Maps API v3 OpenStreetMap as Map Type

  • Switch between OpenStreetMap and Google imagery with map controls

Drawing Manager

• Maps API v3 drawingManager get Polygon paths

  • Retrieve paths from a Polygon overlay and create a Polygon
  • http://stackoverflow.com/questions/32739660

• Maps API v3 drawingManager events

  • Register events on a shape drawn with the drawingManager
  • http://stackoverflow.com/questions/27787618

• Maps API v3 drawingManager stop drawing with ESC key

  • Stop drawing a rectangle when hitting ESC key.
  • http://stackoverflow.com/questions/28425150

• Maps API v3 drawingManager stop drawing polygons with ESC key

  • Stop drawing a polygon when hitting ESC key. Same as above but for polygons. More info on the link below.
  • http://stackoverflow.com/questions/28425150

• Maps API v3 drawingManager circle events

  • Register events on a circle drawn with the drawingManager:
  • http://stackoverflow.com/questions/29101088

ReactJS

• ReactJS Google Maps code sandbox

• ReactJS Google Maps with draggable Marker

• ReactJS Google Maps with Drawing Manager component

• ReactJS Google Maps with geolocation using use-position

  • React hook for following a browser geolocation: npm use-position

• ReactJS Google Maps Autocomplete

  • With https://www.npmjs.com/package/react-google-places-autocomplete

• ReactJS Google Maps API Places Autocomplete Widget

• ReactJS Google Maps API Directions Service update values with useEffect / useState

Vue

• Vue 2 Google Maps boilerplate

  • Uses vue2-google-maps package

• Vue JS - Manually Loading Google Maps API

  • Uses no package - manual loading

• Vue JS - Dynamically add Autocomplete fields

  • Dynamically add Autocomplete input fields and track their value

Google Visualization API

• Google Visualization API simple chart
  • Draw a simple chart with the Visualization API

Bootstrap 4

• Bootstrap 4 base template
  • Fork to test

Google Maps API key for JSFiddle.net and Stackoverflow (provided by Google)

• AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk

Script

• https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk