---
schema_version: "1"
id: 641c899cb224cbde0017b43a5423c95265ba6ca966676cf861374861d28575a4
title: apex:map
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/components/pages-compref-map.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-compref-map.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b6ba5dbba040e034e53d154a9d4fa20b0c9a4d6c2c559f62fd092c1cdfdb2931
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# apex:map

Display an interactive, JavaScript-based map, complete with zooming, panning, and markers based on your Salesforce or other data.

`<apex:map>` doesn't, by itself, display map markers, even for the center point. To display up to 100 markers, add child `<apex:mapMarker>` components.

## Street Map Showing an Account Location

```apex
<apex:page standardController="Account">

  <!-- This page must be accessed with an Account Id in the URL. For example: 
       https://MyDomainName--c.vf.force.com/apex/AccountLocation?id=001D000000JRBet -->
  
  <apex:pageBlock >
    <apex:pageBlockSection title="{! Account.Name } Location">
    
    <!-- Display the text version of the address -->
    <apex:outputPanel >
        <apex:outputField value="{!Account.BillingStreet}"/><br/>
        <apex:outputField value="{!Account.BillingCity}"/>, &nbsp;
        <apex:outputField value="{!Account.BillingState}"/> &nbsp;
        <apex:outputField value="{!Account.BillingPostalCode}"/><br/>
        <apex:outputField value="{!Account.BillingCountry}"/>
    </apex:outputPanel>
        
    <!-- Display the address on a map -->
    <apex:map width="600px" height="400px" mapType="roadmap" zoomLevel="17"
    center="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}">
    </apex:map>
    
    </apex:pageBlockSection>
  </apex:pageBlock>
   
</apex:page>
```

## Attributes

|Attribute Name|Attribute Type|Description|Required?|API Version|Access|
|--------------|--------------|-----------|---------|-----------|------|
|`center`|Object|Specifies the location of the map center. There are several ways to define the center: A string representing an address. For example, "1 Market Street, San Francisco, CA". The address is automatically geocoded to determine its actual latitude and longitude. A string representing a JSON object with `latitude` and `longitude` attributes that specify location coordinates. For example, "{latitude: 37.794, longitude: -122.395}". An Apex map object of type `Map<String, Double>`, with `latitude` and `longitude` keys to specify location coordinates. This attribute is required if `<apex:map>` doesn't have any child `<apex:mapMarker>` tags. When `center` isn't set, the map is centered to display all the markers.| |32.0||
|`height`|String|The height of the map, expressed either as a percentage of the available vertical space (for example, `height="50%"`), or as a number of pixels (for example, `height="200px"`). **Note:** This value is passed through to the generated HTML for the map. If you provide an invalid value, your map might not render.|Yes|32.0||
|`id`|String|An identifier that allows other components in the page to reference this component.| |32.0|global|
|`mapType`|String|The type of map to display. Must be one of the following: hybrid, roadmap, or satellite If not specified, this value defaults to `roadmap`.| |32.0||
|`rendered`|Boolean|A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to `true`.| |32.0||
|`scrollBasedZooming`|Boolean|A Boolean value that specifies whether zooming via scroll wheel is enabled on the map. If not specified, this value defaults to `true`.| |37.0||
|`showOnlyActiveInfoWindow`|Boolean|A Boolean value that specifies whether multiple info windows can be displayed on the map at the same time. If not specified, this value defaults to `true` and only one info window is displayed at a time. That is, when you click another marker, the first info window disappears and the new info window appears.| |34.0||
|`width`|String|The width of the map, expressed either as a percentage of the available horizontal space (for example, `width="50%"`), or as a number of pixels (for example, `width="200px"`). **Note:** This value is passed through to the generated HTML for the map. If you provide an invalid value, your map might not render.|Yes|32.0||
|`zoomLevel`|Integer|The initial map zoom level, defined as integer from 0 to 18. Higher values are more completely zoomed in. When child `<apex:mapMarker>` tags are present and `zoomLevel` isn't set, the map is zoomed and centered to display all of the markers. If not specified and there are no markers, the default value is 15.| |32.0||

**See Also**  


-   [apex:mapMarker](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-compref-mapmarker.md)
-   [Creating Maps with Visualforce](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/maps/pages-maps.md)
-   [Creating Basic Maps](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/maps/pages-maps-basic.md)