Getting Started - Google Maps JavaScript API v3. The Maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices.
The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain) which you can modify using layers and styles, controls and events, and various services and libraries. Audience This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with Google Maps from a user's point of view.
There are many JavaScript tutorials available on the Web. This conceptual documentation is designed to let you quickly start exploring and developing applications with the Maps JavaScript API. Hello, World The easiest way to start learning about the Maps JavaScript API is to see a simple example. View example. Even in this simple example, there are a few things to note: We declare the application as HTML5 using the <! These steps are explained below. Script Tag Attributes. Libraries - google-maps-utility-library-v3 - List of libraries here and quick links to them - Open source project to be a central repository of utility libraries that can be used with the Google Maps API JavaScript v3.
The libraries listed below are all open source.
Note that some are hosted on GitHub, so simply checking out all the code under the "Source" tab above does not get you every library listed here. Instead, click the link next to the library you are interested in. Day Night Overlay Day Night Overlay provides a custom overlay which shows an approximation of where the day/night line runs at any given date. Browse the github repository or see the live samples. GeoJSON to Google Maps The GeoJSON to Google Maps API library lets you easily convert GeoJSON to Overlays, along with default styling rules. Browse the github repository for code and examples. InfoBox This class behaves like google.maps.InfoWindow, but it supports several additional properties for advanced styling. Browse Released Versions or Development Versions. Marker Clusterer The library creates and manages per-zoom-level clusters for large amounts of markers. Browse Released Versions or Development Versions. Marker Clusterer Plus Route Boxer. Styling - Google Maps JavaScript API v3.
Overview Styled maps allow you to customize the presentation of the standard Google base maps, changing the visual display of such elements as roads, parks, and built-up areas.
There are two ways to apply styles to a map: By setting the .styles property of the map's MapOptions object. This approach changes the style of the standard map types (base imagery in terrain and satellite views is not affected, but roads, labels, etc. respect styling rules). See Changing the Default Map Style. Both approaches take an array of MapTypeStyles, each of which is composed of selectors and stylers. Style Syntax Styled maps use two concepts to apply colors and changes to a map: Map features are the geographic elements that can be targeted on the map.
Map features and stylers are combined into a style array, which is passed to the default map's MapOptions object, or to the StyledMapType constructor. Its component pieces are described below. Map Features For example: Stylers The Hue, Saturation, Lightness Model.