Integrating Google Maps with Salesforce - All You Need to Know About
In this blog, we learned how to use the MARKER API to integrate Google Maps with the Salesforce.
An area on a map is designated by a marker. A marker always uses the same image by default. When markers display bespoke images, they are sometimes referred to as "icons." Icons and markers are Marker-type objects.
Generating Google API Key
- Visit the Google Maps Platform > Dashboard page > API page.
- Click Create credentials > API key on the Dashboard page.
Your freshly created API key is displayed in the window for creating API keys.
- To close, click.
The new API key is listed on the Credentials page under API keys.
Don't forget to check out: Access Salesforce Maps Schedule and Manage Saved Events
Adding Marker to the Map
Using Google.maps the initial properties of the marker are specified by single Marker options object literal that is passed to the function Object () {[native code]} of the marker.
When building a marker, the following fields are highly significant and frequently set:
- position (mandatory) specifies a LatLng indicating the marker's original location. a method of getting a LatLng.
- map (optional) means the Map that the marker should be placed on. The marker is created but not attached to (or displayed on) the map if the map is not specified during marker construction.
The vf page's source code can be found below.
<apex:page id="GoogleMap" docType="html-5.0" sidebar="false" showheader="false" >
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<h1>
Location Map
</h1>
<script>
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.535517, 77.391029),
zoom: 20
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</apex:page>
Script Tag Attributes
src: All of the symbols and definitions required for utilizing the Maps JavaScript API are included in the URL from which the Maps JavaScript API is loaded. The URL in this illustration contains two parameters: key and callback, where key is your API key and callback is the name of a global function that will be invoked after the Maps JavaScript API has fully loaded.
Map DOM Elements
We need to set up space for the map in order for it to appear on a web page. Typically, we accomplish this by generating a named div element and locating a reference to it in the document object model of the browser (DOM).
Map Options
Every map must have two options Centre and zoom.
Zoom Levels
The zoom attribute determines the starting resolution at which to display the map; zoom 0 corresponds to a fully zoomed-out map of the Earth, and higher zoom levels zoom in at a higher resolution.
Zoom level:
- 1: World
- 5: Landmass/continent
- 10: City
- 15: Streets
- 20: Buildings
Check out another amazing blog by Shreya here: How to Build a Basic Salesforce REST API Integration
The Map Object
The Map class in JavaScript is the class that symbolises a map. This class of objects specifies a single map on a page. (You are allowed to construct many objects of this class; each object will define a different map on the page.) Using the JavaScript new operator, a new instance of this class is created.
This code creates a new Map object and assigns the variable "map" to it. The function Object() { [native code] } is the method Map().
Responses