# Visualization: Map 1. [Overview](https://developers.google.com/chart/interactive/docs/gallery/map#Overview) 2. [Named Locations](https://developers.google.com/chart/interactive/docs/gallery/map#Strings) 3. [Geocoded Locations](https://developers.google.com/chart/interactive/docs/gallery/map#Latlong) 4. [Customizing Markers](https://developers.google.com/chart/interactive/docs/gallery/map#Markers) 5. [Adding Mutliple Marker Sets](https://developers.google.com/chart/interactive/docs/gallery/map#MarkerSets) 6. [Styling Maps](https://developers.google.com/chart/interactive/docs/gallery/map#Styles) 7. [Loading](https://developers.google.com/chart/interactive/docs/gallery/map#Loading) 8. [Data Format](https://developers.google.com/chart/interactive/docs/gallery/map#Data_Format) 9. [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/map#Configuration_Options) 10. [Methods](https://developers.google.com/chart/interactive/docs/gallery/map#Methods) 11. [Events](https://developers.google.com/chart/interactive/docs/gallery/map#Events) 12. [Data Policy](https://developers.google.com/chart/interactive/docs/gallery/map#Data_Policy) ## Overview The Google Map Chart displays a map using the [Google Maps API](https://developers.google.com/maps). Data values are displayed as markers on the map. Data values can be coordinates (lat-long pairs) or addresses. The map will be scaled so that it includes all the identified points. If you want your maps to be line drawings rather than satellite imagery, use a [geochart](https://developers.google.com/chart/interactive/docs/gallery/geochart) instead. ## Named Locations You can identify the places to put markers by name, as shown below in this map of the top ten countries by population. When the user selects one of the markers, a tooltip with the name and population of the country is displayed, because we used the `showInfoWindow` option. Also, when the user hovers over one of the markers for a short while, a 'title' tip will show up with the same info, because we used the `showTooltip` option. Here's the full HTML: ```

``` ## Geocoded Locations You can also specify locations by latitude and longitude, which loads faster than named locations: The above chart identifies four locations by latitude and longitude. Data ``` var data = google.visualization.arrayToDataTable([ ['Lat', 'Long', 'Name'], [37.4232, -122.0853, 'Work'], [37.4289, -122.1697, 'University'], [37.6153, -122.3900, 'Airport'], [37.4422, -122.1731, 'Shopping'] ]); ``` Full HTML ```

``` ## Customizing Markers You can use marker shapes located elsewhere on the web. Here's an example using blue pins from iconarchive.com: If you select pins in the above chart, they slant. PNGs, GIFs, and JPGs are supported. Data ``` var options = { icons: { default: { normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png', selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png' } } }; ``` Full HTML ```

``` ## Adding Multiple Marker Sets In addition to creating a default set of markers, you can also create multiple sets of markers. To create an additional marker set, add an ID to the `icons` option and set your marker images. Then, add a column to your Data Table, and set the ID of the marker set you wish to use for each row in the Data Table (you can also use `'default'` or `null` to use the default markers). \

``` ## Styling Maps The Map Visualization comes with the ability to set custom styles, allowing you to create one, or several, custom map types. You can define a custom map type by creating a map style object and putting it under its identifier (`mapTypeId`) under the maps option. For example: ``` var options = { maps: { : } }; ``` You can later refer to this custom map type by the map style ID you assigned to it. Your map style object contains a `name`, which will be the display name in the map type control (it does not have to match its `mapTypeId`), and a `styles` array, which will contain style objects for each element you wish to style. The [Google Maps API reference](https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyle) contains a list of the different element, feature, and style types with which you can create a custom map type. **Note:** Your custom `mapTypeId` must be placed under the `maps` option. \

``` In addition to creating custom map types, you can also specify which maps the user can view in the map type control with the `mapTypeIds` option. By default all map types, including your custom map types, will appear in the map type control. The `mapTypeIds` option accepts an array of strings of the map types you wish to allow the user to view. These strings must refer to either the predefined names for the default map styles (i.e. normal, satellite, terrain, hybrid), or the map style ID of a custom map type you defined. By setting the `mapTypeIds` option, your map will only make available the map types you specify in this array. You can also use this in conjunction with the `mapType` option to set a map style as the default, but not include it in the `mapTypeIds` array. This will cause that map to only display on the initial load. \