Google Maps JavaScript API - Complete Training

Learn how to create and use a Google Maps API key to monitor usage and track requests, and understand limits for a browser-based map app.

Create a Google Maps object by supplying a container div and a properties object, then set basic map settings like the map type (roadmap or hybrid) for a web map.

Set up a basic html template, include the google maps javascript api, supply your api key, create a map container, and run on local host to load the map.

Learn to create a Google Maps JavaScript API map by instantiating a map object with a container and a map properties object, configuring center, zoom level, and map type.

Explore four map types in the Google Maps JavaScript API, including road maps, photographic/satellite maps, and hybrid maps that blend imagery with road names and city labels.

Set up the Google Maps JavaScript API and add overlays: markers, circles, and rectangles to mark locations. Explore information windows and custom overlays with hands-on training.

Learn to animate a marker on the Google Maps JavaScript API by applying drop and bounce animations to draw user attention as the marker appears.

Learn how to replace the default marker icon with your own image using the icon property, enabling custom markers for maps on your website or application.

Create polylines on Google Maps to connect locations using latitude and longitude coordinates, adjust styling like opacity, weight, and color, and visualize routes between cities such as Tokyo and London.

Learn to create and style polygons in the Google Maps JavaScript API, defining areas and understanding polygons vs lines on the map, with fill color, stroke, and opacity.

Learn to create and display info windows in the Google Maps JavaScript API, attach them to markers, customize window content, and clear them from the map.

Explore how the Google Maps JavaScript API handles user interactions by listening to map events and triggering responses.

Handle the center change event on the Google Maps JavaScript API to detect when the map center shifts. Pan back to the marker using its position to re-center the map.

Explore Google Map controls and default user interface elements that navigate the map, including draggable panels and move controls, and learn how to create custom controls beyond the defaults.

Learn to disable the default Google Maps JavaScript API controls, such as the back control, zoom control, map type control, and Street View, to embed a clean map.