Visualforce Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Creating Basic Maps

Use the <apex:map> component to create a basic map.

A basic map without markers requires only an <apex:map> component. This component defines the basic “canvas” of the map, including the height and width of the map on the page, the type of map that’s displayed, the location on which the map is centered, and the initial zoom level for the map.

The center attribute defines the point around which the map is centered. You can provide center values in several formats.
  • A string that represents an address. For example, "1 Market Street, San Francisco, CA". The address is automatically geocoded to determine its actual latitude and longitude.
  • A string that represents 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.
If <apex:map> doesn’t have any child <apex:mapMarker> tags, the center attribute is required.
Here’s a simple street map that shows the neighborhood around Salesforce’s San Francisco headquarters.
1<apex:page >
2
3    <h1>Salesforce in San Francisco</h1>
4  
5    <!-- Display the address on a map -->
6    <apex:map width="600px" height="400px" mapType="roadmap" zoomLevel="16"
7        center="One Market Street, San Francisco, CA">
8    </apex:map>
9    
10</apex:page>
The preceding code produces the following map.
A basic Visualforce map
You should notice several aspects of the preceding example.
  • There’s no marker for the address that’s being mapped. <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.
  • The location of the map center is provided as a street address, not a geolocation. The mapping service automatically looks up the latitude and longitude for the address. This process is called geocoding. You can add up to 10 geocoded addresses to a map, either as center attributes or as markers added with <apex:mapMarker> components.
  • The mapType is “roadmap”, a standard street map. Alternatives are “satellite” and “hybrid”.