Use Google Maps in Salesforce.
Hi Guys,
Today I am going to share my experience with google maps on Salesforce. First of all, I must tell you that working with google maps is very cool, interesting & addictive. You can spent hours and hours digging into this. Let's start this post.
There are many libraries available for Google Maps that can be directly embedded into anywhere like Native Android/IOS application or in any web page. You can find all libraries here.
In this tutorial, I am going to use Google Map JavaScript API as I have made a web demo. This app is sample demo app to search for nearby agents of a company and customers can contact their nearby agents for query. At the same time, Agents can locate their current position onto system for real time updates to customers/companies.
Screenshots below will make more sense:
Let's start building a page
To start off, you have to request an API key for Maps from google. That can be done by going to Google API Console and following steps:
- Create or select a project.
- Click Continue to enable the API and any related services.
- On the Credentials page, get a Browser key (and set the API Credentials).
Note: If you are using this page for Salesforce 1, You have to create two more keys i.e. Android key & IOS key to support Salesforce 1 otherwise maps won't behave properly
After creating a project & getting API Keys, you have to refer google maps on your page like below:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
Important: If you have three keys as mentioned above then you need to refer this script dynamically on page. In this demo, this has been handled dynamically, you can check this in github repo
Basic code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Default controls</title>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Now to make this page intuitive & dynamic, We can add some VF remoting methods that will get agents nearby & set location for agents on Salesforce. I am not going to list all things here, the detailed code can be simply seen at this github repo.
To see things in action, Please look at live demo.
If somebody has any question regarding it, I can be contacted at blog@lkatney.com.
Happy Coding!