Summary
Map types
google.maps.MapTypeId.ROADMAP|SATELLITE|HYBRID|TERRAIN
new google.maps.LatLng
Creating maps
new google.maps.Map(document.getElementById("map"), mapOptions)
LAYERS
- google.maps.TrafficLayer(
- google.maps.visualization.HeatmapLayer(
Adding transit layer to map
new google.maps.TransitLayer(); transitLayer.setMap(map);
Data layer
Adding data to data layer
map.data.add({geometry: new google.maps.Data.Polygon([outerCoords, innerCoords1, innerCoords2])}
map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
Setting styles
map.data.setStyle({ icon: '//example.com/path/to/image.png', fillColor: 'green' });
//when the user clicks ,set 'isColorful',changing the color of the lettersmap.data.addListener('click', function(event) { event.feature.setProperty('isColorful', true); });map.data.addListener('mouseover', function(event) { map.data.revertStyle(); map.data.overrideStyle(event.feature, {strokeWeight: 8}); });map.data.addListener('mouseout', function(event) { map.data.revertStyle(); });
TRAFFIC LAYER
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: {lat: 34.04924594193164, lng: -118.24104309082031} }); var trafficLayer = new google.maps.TrafficLayer(); trafficLayer.setMap(map); }
HEAT MAPS
var map, heatmap; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: {lat: 37.775, lng: -122.434}, mapTypeId: 'satellite' }); heatmap = new google.maps.visualization.HeatmapLayer({ data: getPoints(), map: map }); }heatmap.setMap(heatmap.getMap() ? null : map);
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
heatmap.set('radius', heatmap.get('radius') ? null : 20);
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
FUSION TABLES:
A Google Fusion Table is a database table where each row contains data about a particular feature; for geographic data, each row within a Google Fusion Table additionally contains location data, holding a feature’s positional information.
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -25, lng: 133}, zoom: 4 }); var layer = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ' }, styles: [{ polygonOptions: { fillColor: '#00FF00', fillOpacity: 0.3 } }, { where: 'birds > 300', polygonOptions: { fillColor: '#0000FF' } }, { where: 'population > 5', polygonOptions: { fillOpacity: 1.0 } }] }); layer.setMap(map); }
GeoRSS Layers
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: 49.496675, lng: -102.65625} }); var georssLayer = new google.maps.KmlLayer({ url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss' }); georssLayer.setMap(map); }
MAP TYPES
WEB FEED: A web feed (or news feed) is a data format used for providing users with frequently updated content.
KML feature details
Because KML may include a large number of features, you may not access feature data from the
KmlLayer
object directly. Instead, as features are displayed, they are rendered to look like clickable Maps JavaScript API overlays. Clicking on individual features, by default, brings up an InfoWindow
containing KML </code> and <code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;"><description></code> information on the given feature. Additionally, a click on a KML feature generates a <code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">KmlMouseEvent</code>, which passes the following information:</p>
<ul style="box-sizing: inherit; margin: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial; color: rgb(33, 33, 33); font-family: Roboto, sans-serif; font-size: 16px;">
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;"><code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">position</code> indicates the latitude/longitude coordinates at which to anchor the <code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">InfoWindow</code> for this KML feature. This position is generally the clicked location for polygons, polylines, and GroundOverlays, but the true origin for markers.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;"><code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">pixelOffset</code> indicates the offset from the above <code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">position</code> to anchor the <code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">InfoWindow</code> “tail.” For polygonal objects, this offset is typically <code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">0,0</code> but for markers includes the height of the marker.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;"><code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">featureData</code> contains a JSON structure of <code style="box-sizing: inherit; background: rgb(247, 247, 247); color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14.4px; line-height: 1; font-family: "Roboto Mono", monospace; padding: 1px 4px; word-break: break-word;">KmlFeatureData</code>.</li>
</ul>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace"><font data-blogger-escaped-style="color: #cc0000;"><br></font></font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace"><font data-blogger-escaped-style="color: #cc0000;"><br></font></font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace"><font data-blogger-escaped-style="color: #cc0000;">var map = new google.maps.</font>map<font data-blogger-escaped-style="color: #cc0000;">(div,mapOptions)</font></font></span></p>
<p>
<font face="Courier New, Courier, monospace"><br></font></p>
<p>
<font data-blogger-escaped-style="font-family: helvetica neue, arial, helvetica, sans-serif;" face="Courier New, Courier, monospace">google.maps.</font></p>
<p>
<br></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace"><font size="5">google.maps.map</font>(div,{</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace">mapTypeId<font data-blogger-escaped-style="color: #cc0000;">: google.maps.MapTypeId.</font><font data-blogger-escaped-style="color: #274e13;">ROADMAP</font><font data-blogger-escaped-style="color: #cc0000;">|</font>SATELLITE<font data-blogger-escaped-style="color: #cc0000;">|</font><font data-blogger-escaped-style="color: #783f04;">HYBRID</font><font data-blogger-escaped-style="color: #cc0000;">|TERRAIN</font></font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace">center: Initial Center,</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: #7f6000;" face="Courier New, Courier, monospace">zoom:8</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: #7f6000;" face="Courier New, Courier, monospace">zoomControl</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: #7f6000;" face="Courier New, Courier, monospace">zoomControlOptions</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace">draggable: false</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace">zoomControl:false</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace">clickableIcons:false</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font face="Courier New, Courier, monospace">fullscreenControl</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: #b45f06;" face="Courier New, Courier, monospace">mapTypeControl</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: #b45f06;" face="Courier New, Courier, monospace">mapTypeControlOptions</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: #274e13;" face="Courier New, Courier, monospace">panControl</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: #274e13;" face="Courier New, Courier, monospace">panControlOptions</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: blue;" face="Courier New, Courier, monospace">rotateControl</font></span></p>
<p>
<span data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="color: blue;" face="Courier New, Courier, monospace">rotateControlOptions</font></span></p>
<p>
<span data-blogger-escaped-style="font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="background-color: black; color: #bf9000;" style="" face="Courier New, Courier, monospace">streetView</font></span></p>
<p>
<span data-blogger-escaped-style="font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="background-color: black; color: #bf9000;" style="" face="Courier New, Courier, monospace">streetViewControl</font></span></p>
<p>
<span data-blogger-escaped-style="font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="background-color: black; color: #bf9000;" style="" face="Courier New, Courier, monospace">streetViewControlOptions</font></span></p>
<p>
<span data-blogger-escaped-style="font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><font data-blogger-escaped-style="background-color: #e06666;" style="" face="Courier New, Courier, monospace">tilt</font></span></p>
<p>
<font face="Courier New, Courier, monospace"><span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);"><br></span><span data-blogger-escaped-style="background-color: #eeeeee; color: #cc0000; font-family: "helvetica neue", arial, helvetica, sans-serif;" style="background-color: rgb(238, 238, 238);">})</span></font></p>
<p>
<br></p>
<pre class="prettyprint notranslate lang-html devsite-enable-open-in-jsfiddle" data-blogger-escaped-data-jsfiddle-title="Map Simple" data-blogger-escaped-data-scope="map-simple" data-blogger-escaped-style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; box-sizing: inherit; color: #37474f; font-family: "Roboto Mono", monospace; font-size: 14px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 20px; margin-bottom: 16px; margin-top: 16px; overflow-x: auto; padding: 8px; position: relative;" style="margin-top: 16px; margin-bottom: 16px; box-sizing: inherit; color: rgb(55, 71, 79); font-family: "roboto mono", monospace; font-size: 14px; font-stretch: normal; line-height: 20px; overflow-x: auto; padding: 8px; position: relative;"><i data-blogger-escaped-style="background-color: #eeeeee; color: black; font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: medium; white-space: normal;" style="color: black; font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: medium; white-space: normal;"><b style=""><font color="#cc0000" data-blogger-escaped-style="color: #cc0000;" style=""><span style="background-color: rgb(255, 255, 0);">google.maps.MapTypeId</span><span style="background-color: rgb(238, 238, 238);">.</span></font><font color="#274e13" data-blogger-escaped-style="color: #274e13;" style="background-color: rgb(238, 238, 238);">ROADMAP</font><font color="#cc0000" data-blogger-escaped-style="color: #cc0000;" style="background-color: rgb(238, 238, 238);">|</font><span style="background-color: rgb(238, 238, 238);">SATELLITE</span><font color="#cc0000" data-blogger-escaped-style="color: #cc0000;" style="background-color: rgb(238, 238, 238);">|</font><font color="#783f04" data-blogger-escaped-style="color: #783f04;" style="background-color: rgb(238, 238, 238);">HYBRID</font><font color="#cc0000" data-blogger-escaped-style="color: #cc0000;" style="background-color: rgb(238, 238, 238);">|TERRAIN</font></b></i></pre>
<pre class="prettyprint notranslate lang-html devsite-enable-open-in-jsfiddle" data-blogger-escaped-data-jsfiddle-title="Map Simple" data-blogger-escaped-data-scope="map-simple" data-blogger-escaped-style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; box-sizing: inherit; color: #37474f; font-family: "Roboto Mono", monospace; font-size: 14px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 20px; margin-bottom: 16px; margin-top: 16px; overflow-x: auto; padding: 8px; position: relative;" style="margin-top: 16px; margin-bottom: 16px; box-sizing: inherit; color: rgb(55, 71, 79); font-family: "roboto mono", monospace; font-size: 14px; font-stretch: normal; line-height: 20px; overflow-x: auto; padding: 8px; position: relative;"><ul data-blogger-escaped-style="color: black;" style="color: black;">
<li><font data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: small; white-space: normal;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif" size="3" style="background-color: rgb(238, 238, 238); white-space: normal;"><font data-blogger-escaped-style="font-style: italic; font-weight: bold;" style="font-style: italic; font-weight: bold;">ROADMAP</font><b data-blogger-escaped-style="font-style: italic;" style="font-style: italic;">| </b><font color="#660000" data-blogger-escaped-style="color: #660000;"><i>displays normal street map</i></font></font></li>
<li><font data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: small; white-space: normal;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif" size="3" style="background-color: rgb(238, 238, 238); white-space: normal;"><b data-blogger-escaped-style="font-style: italic;" style="font-style: italic;">SATELLITE</b><b data-blogger-escaped-style="font-style: italic;" style="font-style: italic;">| </b><font color="#351c75" data-blogger-escaped-style="color: #351c75;"><i>displays satellite images</i></font></font></li>
<li><i data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: medium; white-space: normal;" style="background-color: rgb(238, 238, 238); font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: medium; white-space: normal;"><font data-blogger-escaped-style="font-weight: bold;" style="font-weight: bold;">HYBRID</font><b>| </b><font color="#0000ff" data-blogger-escaped-style="color: blue;">Transparent layer of major streets on satellite images</font></i></li>
<li><i data-blogger-escaped-style="background-color: #eeeeee; font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: medium; white-space: normal;" style="background-color: rgb(238, 238, 238); font-family: "helvetica neue", arial, helvetica, sans-serif; font-size: medium; white-space: normal;"><b>TERRAIN: </b>terrain+vegetation</i></li>
</ul>
</pre>
<p>
<i><font color="#800080" data-blogger-escaped-style="color: purple; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif" size="5"><b data-blogger-escaped-style="background-color: #cccccc;" style="background-color: rgb(204, 204, 204);">Layers on Google Map</b></font></i></p>
<p>
<i><font color="#800080" data-blogger-escaped-style="color: purple; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif" size="5"><b data-blogger-escaped-style="background-color: #cccccc;" style="background-color: rgb(204, 204, 204);"><br></b></font></i></p>
<ul style="font-size: 16px; box-sizing: inherit; margin: 0px; padding-left: 40px; list-style-position: outside; list-style-image: initial; color: rgb(33, 33, 33); font-family: Roboto, sans-serif;">
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;">The <a href="https://developers.google.com/maps/documentation/javascript/datalayer" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;"><strong style="box-sizing: inherit;">Google Maps Data layer</strong></a> provides a container for arbitrary geospatial data. You can use the Data layer to store your custom data, or to display GeoJSON data on a Google map.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;">The <a href="https://developers.google.com/maps/documentation/javascript/fusiontableslayer" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;"><strong style="box-sizing: inherit;">Fusion Tables layer</strong></a> renders data contained in Google <a href="https://developers.google.com/fusiontables" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;">Fusion Tables</a>.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;">The <a href="https://developers.google.com/maps/documentation/javascript/heatmaplayer" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;"><strong style="box-sizing: inherit;">Heatmap layer</strong></a> renders geographic data using a <em style="box-sizing: inherit;">Heatmap</em> visualization.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;">The <a href="https://developers.google.com/maps/documentation/javascript/kmllayer" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;"><strong style="box-sizing: inherit;">KML layer</strong></a> renders KML and GeoRSS elements into a Maps JavaScript API tile overlay.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;">The <a href="https://developers.google.com/maps/documentation/javascript/trafficlayer#traffic_layer" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;"><strong style="box-sizing: inherit;">Traffic layer</strong></a> displays traffic conditions on the map.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;">The <a href="https://developers.google.com/maps/documentation/javascript/trafficlayer#transit_layer" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;"><strong style="box-sizing: inherit;">Transit layer</strong></a> displays the public transport network of your city on the map.</li>
<li style="box-sizing: inherit; margin: 8px 0px; padding: 0px;">The <a href="https://developers.google.com/maps/documentation/javascript/trafficlayer#bicycling_layer" style="box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;"><strong style="box-sizing: inherit;">Bicycling layer</strong></a> object renders a layer of bike paths and/or bicycle-specific overlays into a common layer. This layer is returned by default within the <strong style="box-sizing: inherit;">DirectionsRenderer</strong> when requesting directions of travel mode <strong style="box-sizing: inherit;">BICYCLING</strong>.</li>
</ul>
<p>
<i><font color="#800080" data-blogger-escaped-style="color: purple; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;" face=""helvetica neue" , "arial" , "helvetica" , sans-serif" size="5"><b data-blogger-escaped-style="background-color: #cccccc;" style="background-color: rgb(204, 204, 204);"><br></b></font></i></p>
<pre class="prettyprint notranslate" style="margin-top: 16px; margin-bottom: 16px; font-variant-numeric: normal; font-variant-east-asian: normal; box-sizing: inherit; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(55, 71, 79); font-stretch: normal; font-size: 14px; line-height: 20px; font-family: "Roboto Mono", monospace; padding: 8px; overflow-x: auto; position: relative;"><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">var</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> mapOptions </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">=</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> zoom</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">13</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> center</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">new</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> google</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">maps</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="typ" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(156, 39, 176);">LatLng</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">(</span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">51.5</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,-</span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">0.11</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">)</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">}</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">var</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> map </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">=</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">new</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> google</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">maps</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="typ" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(156, 39, 176);">Map</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">(</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">document</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">getElementById</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">(</span><span class="str" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(13, 144, 79);">"map"</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">),</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> mapOptions</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">);</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">var</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> transitLayer </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">=</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">new</span><span class="pln" style="box-sizing: inherit;"><span style="background-color: rgb(247, 247, 247);"> </span><span style="background-color: rgb(255, 255, 0);">google</span></span><span style="background-color: rgb(255, 255, 0);"><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">maps</span><span class="pun" style="box-sizing: inherit;">.</span><span class="typ" style="box-sizing: inherit; color: rgb(156, 39, 176);">TransitLayer</span></span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">();</span><span class="pln" style="box-sizing: inherit;"><span style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span style="background-color: rgb(255, 255, 0);">transitLayer</span></span><span style="background-color: rgb(255, 255, 0);"><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">setMap</span><span class="pun" style="box-sizing: inherit;">(</span><span class="pln" style="box-sizing: inherit;">map</span><span class="pun" style="box-sizing: inherit;">)</span></span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">;</span></pre>
<p>
<font color="#800080" size="5"><span style="background-color: rgb(204, 204, 204);"><b style=""><i style=""><font face="helvetica neue, arial, helvetica, sans-serif">Data </font><font face="Courier New, Courier, monospace">Layer : google.maps.Data</font></i></b></span></font></p>
<p>
</p>
<ul>
<li><font face="Courier New, Courier, monospace">Draw polygons on your map</font></li>
<li><font face="Courier New, Courier, monospace">Add GeoJSON data to your map </font></li>
<li><font face="Courier New, Courier, monospace">Use google.maps.Data to model arbitrary data</font></li>
<li><br></li>
<li><font face="Courier New, Courier, monospace">// Define the LatLng coordinates for another inner path.</font></li>
</ul>
<h2 id="load_geojson" style="font-variant-numeric: normal; font-variant-east-asian: normal; box-sizing: inherit; overflow: hidden; padding: 0px; text-overflow: ellipsis; border-bottom: 0px; font-weight: 400; font-stretch: normal; font-size: 22px; line-height: 30px; font-family: "Google Sans", sans-serif; letter-spacing: -0.01em; margin: 48px 0px 24px; color: rgb(33, 33, 33);">
<pre class="prettyprint notranslate lang-javascript devsite-enable-open-in-jsfiddle" data-scope="layer-data-polygon" data-jsfiddle-title="Data Layer: Polygon" style="margin-top: 16px; margin-bottom: 16px; box-sizing: inherit; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14px; line-height: 20px; font-family: "Roboto Mono", monospace; padding: 8px; overflow-x: auto; position: relative; letter-spacing: normal;"><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">var</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> innerCoords2 </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">=</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">[</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">lat</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">-</span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">33.364</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> lng</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">156.207</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">},</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">lat</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">-</span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">34.364</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> lng</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">156.207</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">},</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">lat</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">-</span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">34.364</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> lng</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">157.207</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">},</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">lat</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">-</span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">33.364</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> lng</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">157.207</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">}</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">];</span><span class="pln" style="box-sizing: inherit;"><span style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span style="background-color: rgb(238, 238, 238);"> </span><span style="background-color: rgb(255, 255, 0);"> map</span></span><span style="background-color: rgb(255, 255, 0);"><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">data</span><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">add</span></span><span class="pun" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">({</span><span class="pln" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">geometry</span><span class="pun" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(238, 238, 238); box-sizing: inherit;"> </span><span class="kwd" style="background-color: rgb(238, 238, 238); box-sizing: inherit; color: rgb(59, 120, 231);">new</span><span class="pln" style="box-sizing: inherit;"><span style="background-color: rgb(238, 238, 238);"> </span><span style="background-color: rgb(255, 255, 0);">google</span></span><span style="background-color: rgb(255, 255, 0);"><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">maps</span><span class="pun" style="box-sizing: inherit;">.</span><span class="typ" style="box-sizing: inherit; color: rgb(156, 39, 176);">Data</span><span class="pun" style="box-sizing: inherit;">.</span><span class="typ" style="box-sizing: inherit; color: rgb(156, 39, 176);">Polygon</span></span><span class="pun" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">([</span><span class="pln" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">outerCoords</span><span class="pun" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(238, 238, 238); box-sizing: inherit;"><br style="box-sizing: inherit;"> innerCoords1</span><span class="pun" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(238, 238, 238); box-sizing: inherit;"><br style="box-sizing: inherit;"> innerCoords2</span><span class="pun" style="background-color: rgb(238, 238, 238); box-sizing: inherit;">])})</span></pre>
</h2>
<h2 id="load_geojson" style="font-variant-numeric: normal; font-variant-east-asian: normal; box-sizing: inherit; overflow: hidden; padding: 0px; text-overflow: ellipsis; border-bottom: 0px; font-weight: 400; font-stretch: normal; font-size: 22px; line-height: 30px; font-family: "Google Sans", sans-serif; letter-spacing: -0.01em; margin: 48px 0px 24px; color: rgb(33, 33, 33);">
Load GeoJSON: <a href="http://geojson.org/" style="font-family: Roboto, sans-serif; font-size: 16px; letter-spacing: normal; box-sizing: inherit; color: rgb(3, 155, 229); outline: 0px; text-decoration-line: none;">GeoJSON</a><span style="font-family: Roboto, sans-serif; font-size: 16px; letter-spacing: normal;"> is a common standard for sharing</span><span style="font-family: Roboto, sans-serif; font-size: 16px; letter-spacing: normal;"> </span><span style="font-family: Roboto, sans-serif; font-size: 16px; letter-spacing: normal; background-color: rgb(255, 255, 0);">geospatial data </span><span style="font-family: Roboto, sans-serif; font-size: 16px; letter-spacing: normal;">on the internet</span></h2>
<h2 id="load_geojson" style="font-variant-numeric: normal; font-variant-east-asian: normal; box-sizing: inherit; overflow: hidden; padding: 0px; text-overflow: ellipsis; border-bottom: 0px; font-weight: 400; font-stretch: normal; font-size: 22px; line-height: 30px; font-family: "Google Sans", sans-serif; letter-spacing: -0.01em; margin: 48px 0px 24px; color: rgb(33, 33, 33);">
var<span class="pln" style="color: rgb(55, 71, 79); font-family: "Roboto Mono", monospace; font-size: 14px; letter-spacing: normal; background-color: rgb(247, 247, 247); box-sizing: inherit;"> map</span><span class="pun" style="color: rgb(55, 71, 79); font-family: "Roboto Mono", monospace; font-size: 14px; letter-spacing: normal; background-color: rgb(247, 247, 247); box-sizing: inherit;">;</span></h2>
<h2 id="load_geojson" style="font-variant-numeric: normal; font-variant-east-asian: normal; box-sizing: inherit; overflow: hidden; padding: 0px; text-overflow: ellipsis; border-bottom: 0px; font-weight: 400; font-stretch: normal; font-size: 22px; line-height: 30px; font-family: "Google Sans", sans-serif; letter-spacing: -0.01em; margin: 48px 0px 24px; color: rgb(33, 33, 33);">
<pre class="prettyprint notranslate lang-javascript devsite-enable-open-in-jsfiddle" data-scope="layer-data-simple" data-jsfiddle-title="Data Layer: Simple" style="margin-top: 16px; margin-bottom: 16px; box-sizing: inherit; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14px; line-height: 20px; font-family: "Roboto Mono", monospace; padding: 8px; overflow-x: auto; position: relative; letter-spacing: normal;"><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">function</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> initMap</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">()</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> map </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">=</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="kwd" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(59, 120, 231);">new</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> google</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">maps</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="typ" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(156, 39, 176);">Map</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">(</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">document</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">.</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">getElementById</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">(</span><span class="str" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(13, 144, 79);">'map'</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">),</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> zoom</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">4</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> center</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">{</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">lat</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">-</span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">28</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">,</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> lng</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">:</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"> </span><span class="lit" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(197, 57, 41);">137</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">}</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">});</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="com" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(216, 27, 96);">// NOTE: This uses cross-domain XHR, and may not work on older browsers.</span><span class="pln" style="box-sizing: inherit;"><span style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span style="background-color: rgb(255, 255, 0);"> map</span></span><span style="background-color: rgb(255, 255, 0);"><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">data</span><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">loadGeoJson</span></span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">(</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="str" style="background-color: rgb(247, 247, 247); box-sizing: inherit; color: rgb(13, 144, 79);">'https://storage.googleapis.com/mapsdevsite/json/google.json'</span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">);</span><span class="pln" style="background-color: rgb(247, 247, 247); box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span class="pun" style="background-color: rgb(247, 247, 247); box-sizing: inherit;">}</span></pre>
<pre class="prettyprint notranslate lang-javascript devsite-enable-open-in-jsfiddle" data-scope="layer-data-simple" data-jsfiddle-title="Data Layer: Simple" style="margin-top: 16px; margin-bottom: 16px; box-sizing: inherit; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14px; line-height: 20px; font-family: "Roboto Mono", monospace; padding: 8px; overflow-x: auto; position: relative; letter-spacing: normal;">map<span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">data</span><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">loadGeoJson</span><span class="pun" style="box-sizing: inherit;">(</span><span class="str" style="box-sizing: inherit; color: rgb(13, 144, 79);">'google.json'</span><span class="pun" style="box-sizing: inherit;">);</span></pre>
<pre class="prettyprint notranslate lang-javascript devsite-enable-open-in-jsfiddle" data-scope="layer-data-simple" data-jsfiddle-title="Data Layer: Simple" style="margin-top: 16px; margin-bottom: 16px; box-sizing: inherit; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(55, 71, 79); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14px; line-height: 20px; font-family: "Roboto Mono", monospace; padding: 8px; overflow-x: auto; position: relative; letter-spacing: normal;"><pre class="prettyprint notranslate lang-javascript" style="box-sizing: inherit; background: rgb(247, 247, 247); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: 20px; font-family: "Roboto Mono", monospace; padding: 8px; margin-top: 16px; margin-bottom: 16px; overflow-x: auto; position: relative;"><span class="pln" style="box-sizing: inherit;">map</span><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">data</span><span class="pun" style="box-sizing: inherit;">.</span><span class="pln" style="box-sizing: inherit;">setStyle</span><span class="pun" style="box-sizing: inherit;">({</span><span class="pln" style="box-sizing: inherit;"><br style="box-sizing: inherit;"> icon</span><span class="pun" style="box-sizing: inherit;">:</span><span class="pln" style="box-sizing: inherit;"> </span><span class="str" style="box-sizing: inherit; color: rgb(13, 144, 79);">'//example.com/path/to/image.png'</span><span class="pun" style="box-sizing: inherit;">,</span><span class="pln" style="box-sizing: inherit;"><br style="box-sizing: inherit;"> fillColor</span><span class="pun" style="box-sizing: inherit;">:</span><span class="pln" style="box-sizing: inherit;"> </span><span class="str" style="box-sizing: inherit; color: rgb(13, 144, 79);">'green'</span><span class="pln" style="box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span class="pun" style="box-sizing: inherit;">});</span></pre>
</pre>
</h2>
<pre class="prettyprint devsite-enable-open-in-jsfiddle" data-scope="layer-data-dynamic" data-jsfiddle-title="Data Layer: Dynamic Styling" style="box-sizing: inherit; background: rgb(33, 33, 33); color: rgb(236, 239, 241); font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 14px; line-height: 20px; font-family: "Roboto Mono", monospace; padding: 8px; margin-top: 16px; margin-bottom: 16px; overflow-x: auto; position: relative;"><span class="dec" style="box-sizing: inherit; color: rgb(251, 192, 45);"><!DOCTYPE html></span><span class="pln" style="box-sizing: inherit;"><br style="box-sizing: inherit;"></span><span class="tag" style="box-sizing: inherit; color: rgb(77, 208, 225);"><html></span><span class="pln" style="box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="tag" style="box-sizing: inherit; color: rgb(77, 208, 225);"><head></span><span class="pln" style="box-sizing: inherit;"><br style="box-sizing: inherit;"> </span><span class="tag" style="box-sizing: inherit; color: rgb(77, 208, 225);"><title></span><span class="pln" style="box-sizing: inherit;">Data Layer: Dynamic Styling</span><span class="tag" style="box-sizing: inherit; color: rgb(77, 208, 225);">
name="viewport" content="initial-scale=1.0">
charset="utf-8">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
id="map">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// Load GeoJSON.
map.data.loadGeoJson(
'https://storage.googleapis.com/mapsdevsite/json/google.json');
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
return /** @type {!google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
}
Maps
Map class
google.maps.Map
class
This class extends
MVCObject
.Constructor | |
---|---|
Map | Map(mapDiv[, opts])
Creates a new map inside of the given HTML container, which is typically a
DIV element. |
Methods | |
---|---|
fitBounds | fitBounds(bounds[, padding])
Return Value: None
Sets the viewport to contain the given bounds.
Note: When the map is set to display: none , the fitBounds function reads the map's size as 0x0, and therefore does not do anything. To change the viewport while the map is hidden, set the map to visibility: hidden , thereby ensuring the map div has an actual size. |
getBounds | getBounds()
Parameters: None
Return Value:
LatLngBounds
Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized (i.e. the mapType is still null), or center and zoom have not been set then the result is
null or undefined . |
getCenter | getCenter()
Parameters: None
Return Value:
LatLng
Returns the position displayed at the center of the map. Note that this
LatLng object is notwrapped. See LatLng for more information. |
getClickableIcons | getClickableIcons()
Parameters: None
Return Value:
boolean
Returns the clickability of the map icons. A map icon represents a point of interest, also known as a POI. If the returned value is true, then the icons are clickable on the map.
|
getDiv | getDiv()
Parameters: None
Return Value:
Element |
getHeading | getHeading()
Parameters: None
Return Value:
number
Returns the compass heading of aerial imagery. The heading value is measured in degrees (clockwise) from cardinal direction North.
|
getMapTypeId | getMapTypeId()
Parameters: None
Return Value:
MapTypeId|string |
getProjection | getProjection()
Parameters: None
Return Value:
Projection
Returns the current
Projection . If the map is not yet initialized (i.e. the mapType is still null) then the result is null. Listen to projection_changed and check its value to ensure it is not null. |
getStreetView | getStreetView()
Parameters: None
Return Value:
StreetViewPanorama
Returns the default
StreetViewPanorama bound to the map, which may be a default panorama embedded within the map, or the panorama set using setStreetView() . Changes to the map's streetViewControl will be reflected in the display of such a bound panorama. |
getTilt | getTilt()
Parameters: None
Return Value:
number
Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane. The result will be
0 for imagery taken directly overhead or 45 for 45° imagery. 45° imagery is only available for satellite and hybrid map types, within some locations, and at some zoom levels. Note: This method does not return the value set by setTilt . See setTilt for details. |
getZoom | getZoom()
Parameters: None
Return Value:
number |
panBy | panBy(x, y)
Parameters:
Return Value: None
Changes the center of the map by the given distance in pixels. If the distance is less than both the width and height of the map, the transition will be smoothly animated. Note that the map coordinate system increases from west to east (for x values) and north to south (for y values).
|
panTo | panTo(latLng)
Return Value: None
Changes the center of the map to the given
LatLng . If the change is less than both the width and height of the map, the transition will be smoothly animated. |
panToBounds | panToBounds(latLngBounds[, padding])
Return Value: None
Pans the map by the minimum amount necessary to contain the given
LatLngBounds . It makes no guarantee where on the map the bounds will be, except that the map will be panned to show as much of the bounds as possible inside {currentMapSizeInPx} - {padding} . |
setCenter | setCenter(latlng)
Return Value: None
|
setClickableIcons | setClickableIcons(value)
Parameters:
Return Value: None
Controls whether the map icons are clickable or not. A map icon represents a point of interest, also known as a POI. To disable the clickability of map icons, pass a value of
false to this method. |
setHeading | setHeading(heading)
Parameters:
Return Value: None
Sets the compass heading for aerial imagery measured in degrees from cardinal direction North.
|
setMapTypeId | setMapTypeId(mapTypeId)
Return Value: None
|
setOptions | setOptions(options)
Return Value: None
|
setStreetView | setStreetView(panorama)
Return Value: None
Binds a
StreetViewPanorama to the map. This panorama overrides the default StreetViewPanorama , allowing the map to bind to an external panorama outside of the map. Setting the panorama to null binds the default embedded panorama back to the map. |
setTilt | setTilt(tilt)
Parameters:
Return Value: None
Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are
0 and 45 . setTilt(0) causes the map to always use a 0° overhead view regardless of the zoom level and viewport. setTilt(45) causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for satellite and hybrid map types, within some locations, and at some zoom levels. Note:getTilt returns the current tilt angle, not the value set by setTilt . Because getTilt and setTilt refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects. |
setZoom | setZoom(zoom)
Parameters:
Return Value: None
|
Properties | |
---|---|
controls |
Type:
Array<MVCArray
Additional controls to attach to the map. To add a control to the map, add the control's
to the MVCArray corresponding to the ControlPosition where it should be rendered. |
data |
Type:
Data
An instance of
Data , bound to the map. Add features to this Data object to conveniently display them on this map. |
mapTypes |
Type:
MapTypeRegistry
A registry of
MapType instances by string ID. |
overlayMapTypes |
Additional map types to overlay. Overlay map types will display on top of the base map they are attached to, in the order in which they appear in the
overlayMapTypes array (overlays with higher index values are displayed in front of overlays with lower index values). |
Events | |
---|---|
bounds_changed | function()
Arguments: None
This event is fired when the viewport bounds have changed.
|
center_changed | function()
Arguments: None
This event is fired when the map center property changes.
|
click | function(event)
This event is fired when the user clicks on the map. An ApiMouseEvent with properties for the clicked location is returned unless a place icon was clicked, in which case an IconMouseEvent with a placeid is returned. IconMouseEvent and ApiMouseEvent are identical, except that IconMouseEvent has the placeid field. The event can always be treated as an ApiMouseEvent when the placeid is not important. The click event is not fired if a marker or infowindow was clicked.
|
dblclick | function(event)
This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.
|
drag | function()
Arguments: None
This event is repeatedly fired while the user drags the map.
|
dragend | function()
Arguments: None
This event is fired when the user stops dragging the map.
|
dragstart | function()
Arguments: None
This event is fired when the user starts dragging the map.
|
heading_changed | function()
Arguments: None
This event is fired when the map heading property changes.
|
idle | function()
Arguments: None
This event is fired when the map becomes idle after panning or zooming.
|
maptypeid_changed | function()
Arguments: None
This event is fired when the mapTypeId property changes.
|
mousemove | function(event)
This event is fired whenever the user's mouse moves over the map container.
|
mouseout | function(event)
This event is fired when the user's mouse exits the map container.
|
mouseover | function(event)
This event is fired when the user's mouse enters the map container.
|
projection_changed | function()
Arguments: None
This event is fired when the projection has changed.
|
rightclick | function(event)
This event is fired when the DOM contextmenu event is fired on the map container.
|
tilesloaded | function()
Arguments: None
This event is fired when the visible tiles have finished loading.
|
tilt_changed | function()
Arguments: None
This event is fired when the map tilt property changes.
|
zoom_changed | function()
Arguments: None
This event is fired when the map zoom property changes.
|
MapOptions interface
google.maps.MapOptions
interface
MapOptions object used to define the properties that can be set on a Map.
Properties | |
---|---|
backgroundColor |
Type:
string
Color used for the background of the Map div. This color will be visible when tiles have not yet loaded as the user pans. This option can only be set when the map is initialized.
|
center |
Type:
LatLng|LatLngLiteral
The initial Map center. Required.
|
clickableIcons |
Type:
boolean
When
false , map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable. |
disableDefaultUI |
Type:
boolean
Enables/disables all default UI. May be overridden individually.
|
disableDoubleClickZoom |
Type:
boolean
Enables/disables zoom and center on double click. Enabled by default.
Note: This property is not recommended. To disable zooming on double click, you can use the
gestureHandling property, and set it to "none" . |
draggable |
Type:
boolean
If false, prevents the map from being dragged. Dragging is enabled by default.
Note: This property is deprecated. To disable dragging on the map, you can use the
gestureHandling property, and set it to "none" . |
draggableCursor |
Type:
string
The name or url of the cursor to display when mousing over a draggable map. This property uses the css
cursor attribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example: draggableCursor: 'url(http://www.example.com/icon.png), auto;' . |
draggingCursor |
Type:
string
The name or url of the cursor to display when the map is being dragged. This property uses the css
cursor attribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example: draggingCursor: 'url(http://www.example.com/icon.png), auto;' . |
fullscreenControl |
Type:
boolean
The enabled/disabled state of the Fullscreen control.
|
fullscreenControlOptions |
Type:
FullscreenControlOptions
The display options for the Fullscreen control.
|
gestureHandling |
Type:
string
This setting controls how the API handles gestures on the map. Allowed values:
|
heading |
Type:
number
The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available.
|
keyboardShortcuts |
Type:
boolean
If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default.
|
mapTypeControl |
Type:
boolean
The initial enabled/disabled state of the Map type control.
|
mapTypeControlOptions |
Type:
MapTypeControlOptions
The initial display options for the Map type control.
|
mapTypeId |
Type:
MapTypeId|string
The initial Map mapTypeId. Defaults to
ROADMAP . |
maxZoom |
Type:
number
The maximum zoom level which will be displayed on the map. If omitted, or set to null, the maximum zoom from the current map type is used instead. Valid values: Integers between zero, and up to the supported maximum zoom level.
|
minZoom |
Type:
number
The minimum zoom level which will be displayed on the map. If omitted, or set to null, the minimum zoom from the current map type is used instead. Valid values: Integers between zero, and up to the supported maximum zoom level.
|
noClear |
Type:
boolean
If true, do not clear the contents of the Map div.
|
panControl |
Type:
boolean
The enabled/disabled state of the Pan control.
Note: The Pan control is not available in the new set of controls introduced in v3.22 of the Google Maps JavaScript API. While using v3.22 and v3.23, you can choose to use the earlier set of controls rather than the new controls, thus making the Pan control available as part of the old control set. See What's New in the v3.22 Map Controls.
|
panControlOptions |
Type:
PanControlOptions
The display options for the Pan control.
Note: The Pan control is not available in the new set of controls introduced in v3.22 of the Google Maps JavaScript API. While using v3.22 and v3.23, you can choose to use the earlier set of controls rather than the new controls, thus making the Pan control available as part of the old control set. See What's New in the v3.22 Map Controls.
|
rotateControl |
Type:
boolean
The enabled/disabled state of the Rotate control.
|
rotateControlOptions |
Type:
RotateControlOptions
The display options for the Rotate control.
|
scaleControl |
Type:
boolean
The initial enabled/disabled state of the Scale control.
|
scaleControlOptions |
Type:
ScaleControlOptions
The initial display options for the Scale control.
|
scrollwheel |
Type:
boolean
If false, disables zooming on the map using a mouse scroll wheel. The scrollwheel is enabled by default.
Note: This property is not recommended. To disable zooming using scrollwheel, you can use the
gestureHandling property, and set it to either "cooperative" or "none" . |
streetView |
Type:
StreetViewPanorama
A
StreetViewPanorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default StreetViewPanorama will be displayed in the map's div when the pegman is dropped. |
streetViewControl |
Type:
boolean
The initial enabled/disabled state of the Street View Pegman control. This control is part of the default UI, and should be set to
false when displaying a map type on which the Street View road overlay should not appear (e.g. a non-Earth map type). |
streetViewControlOptions |
Type:
StreetViewControlOptions
The initial display options for the Street View Pegman control.
|
styles |
Type:
Array<MapTypeStyle>
Styles to apply to each of the default map types. Note that for
satellite /hybrid and terrain modes, these styles will only apply to labels and geometry. |
tilt |
Type:
number
Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are
0 and 45 . The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 45 causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for satellite and hybrid map types, within some locations, and at some zoom levels. Note:getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects. |
zoom |
Type:
number
The initial Map zoom level. Required. Valid values: Integers between zero, and up to the supported maximum zoom level.
|
zoomControl |
Type:
boolean
The enabled/disabled state of the Zoom control.
|
zoomControlOptions |
Type:
ZoomControlOptions
The display options for the Zoom control.
|
MapTypeStyle interface
google.maps.MapTypeStyle
interface
The
MapTypeStyle
is a collection of selectors and stylers that define how the map should be styled. Selectors specify the map features and/or elements that should be affected, and stylers specify how those features and elements should be modified. For details, see the style reference.Properties | |
---|---|
elementType |
Type:
string
The element to which a styler should be applied. An element is a visual aspect of a feature on the map. Example: a label, an icon, the stroke or fill applied to the geometry, and more. Optional. If
elementType is not specified, the value is assumed to be 'all' . For details of usage and allowed values, see the style reference. |
featureType |
Type:
string
The feature, or group of features, to which a styler should be applied. Optional. If
featureType is not specified, the value is assumed to be 'all' . For details of usage and allowed values, see the style reference. |
stylers |
Type:
Array
The style rules to apply to the selected map features and elements. The rules are applied in the order that you specify in this array. For guidelines on usage and allowed values, see the style reference.
|
MouseEvent interface
google.maps.MouseEvent
interface
This object is returned from various mouse events on the map and overlays, and contains all the fields shown below.
Methods | |
---|---|
stop | stop()
Parameters: None
Return Value: None
Prevents this event from propagating further.
|
IconMouseEvent interface
google.maps.IconMouseEvent
interface
This object is sent in an event when a user clicks on an icon on the map. The place ID of this place is stored in the placeId member. To prevent the default info window from showing up, call the stop() method on this event to prevent it being propagated. Learn more about place IDs in the Places API developer guide.
This interface extends
MouseEvent
.MapTypeId constants
google.maps.MapTypeId
constants
Identifiers for common MapTypes. Specify these by value, or by using the constant's name. For example,
'satellite'
or google.maps.MapTypeId.SATELLITE
.MapTypeRegistry class
google.maps.MapTypeRegistry
class
A registry for MapType instances, keyed by MapType id.
This class extends
MVCObject
.Constructor | |
---|---|
MapTypeRegistry | MapTypeRegistry()
Parameters: None
The
MapTypeRegistry holds the collection of custom map types available to the map for its use. The API consults this registry when providing the list of avaiable map types within controls, for example. |
TrafficLayer class
google.maps.TrafficLayer
google.maps.TrafficLayerOptions
google.maps.TransitLayer
google.maps.BicyclingLayer
No comments:
Post a Comment