Display Google Map in the formula field using geo-location fields
By I came across a question on the answer community where someone is looking for a solution to display the google map on detail page using geolocation field. I thought it’s a good topic to write about so everyone will get benefitted.
Use case – I have a geolocation field on the Account object for storing the client’s office location, now I want to display that location on google map. Is that possible?
Solution – Yes, it’s pretty simple and anyone can do that using a formula field. Formula field will use the google map static API to display the image of the location. So, following are the steps to display the geolocation on google map.
- Create a formula field of Text type.
- Use IMAGE function in the formula which will render the image dynamically based on the passed geolocation.
IMAGE('https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&zoom=Zoom_Level&size=Map_WidthxMap_Height&markers=color:Marker_Color|label:Marker_Label|'+ TEXT(GeoLocation_Latitude_Field) + ',' + TEXT(GeoLocation_Longitute_Field), 'Title')
You must also add your API Keys obtained from your google account.
New pricing changes went into effect on July 16, 2018 and that has made the Google API keys mandatory in the URL.
If you want to obtain the API keys then here is the link to the page – https://developers.google.com/maps/documentation/javascript/get-api-key
Why don’t we take a simple example? Yes, we should and that will help all of us to understand the solution.
Example – I have a field with label “Office location” (Geolocation field) and Office_Location__c is the API name. Now, it will have 2 integrated fields (Latitude__s and Longitude__s) for storing the latitude and longitude values respectively.
Now, I created a “Location on Map” formula field (Text) and following is the formula for that field.
IMAGE('https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=300x200&markers=color:green|label:S|'+ TEXT(Office_Location__Latitude__s) + ',' + TEXT(Office_Location__Longitude__s), 'Office Location')
Here is the outcome from the above formula.
Following URL can be useful to update the formula to leverage wonderful features of google map API.
Google Map Static API
By Naveen Sharma
November 26, 2018Hi Naval,
Thanks for the post. That was exactly what I need it. However, even though I followed your instructions and the formula field seems correct. The image is not showing up on the details page and I can’t figure out why.. any ideas?
Thank you
By Naveen Sharma
November 27, 2018New pricing changes went into effect on July 16, 2018 and that has made the Google API keys mandatory in the URL.
If you want to obtain the API keys then here is the link to the page – https://developers.google.com/maps/documentation/javascript/get-api-key
I have updated the post with the new URL.
By Naveen Sharma
November 27, 2018Thanks again Naval. but can you be more specific on what API keys I need, please? I tryed the Geolocation API key, the Maps Javascript APi and the Google Map Static API and I’m still not getting the image.
Thank you
By Naveen Sharma
November 27, 2018Never mind! I figured out. My problem was an invalid size parameter.
this is the formula I had to use:
IMAGE(‘https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyCMuglX6tFn5Bd_bk4snTUGcpbVXSIkiYY&zoom=Zoom_Level&size=252×142&markers=color:Marker_Color|label:Marker_Label|’+ TEXT( Geoloc_bin__Latitude__s ) + ‘,’ + TEXT( Geoloc_bin__Longitude__s ), ‘Bin Location’)
Thanks anyway!
By Naveen Sharma
February 14, 2019Thanks Naval for the good post. I’ve implemented as suggested but I’m getting a broken icon on the display. I know it’s hitting Google maps as the API counter is incrementing. I’ve also tried to move the field to it’s own section as well as changed the size a few times. Any suggestions? Thanks!
By Naveen Sharma
February 14, 2019I’m getting an error from Google Maps (google.maps.BaseMap.Http) but I’m unsure what I’ve done wrong. Here’s my code
IMAGE(‘https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyCzWwRRpzCwxx5iVGBdFP39FHUPPuziEdw&zoom=13&zoom=13&size=300×200&markers=color:green|label:S|’+ TEXT(Geolocation__Latitude__s ) + ‘,’ + TEXT(Geolocation__Longitude__s), ‘Asset Location’)
Thanks for your help!
By Naveen Sharma
February 15, 2019Hi Lance,
You have 2 zoom parameters in your URL and also in “size=300×200” it should be ‘x’ character. I think while copying it from the post, somehow it is changed.
On other note – Do not share your API Keys here as others can use it. 😉
By Naveen Sharma
March 8, 2019Hello Naval
Good morning from Greece and thank you for your solution, I think I have done everything as opposed but the end results I am shown in the Contact record is an image rendered in light blue colour, with the Google Brand name on the lower left corner and the Map Data @ 2019 on the right corner.
Latitude used: 38.001970
Longitude used: 23.717930
At start I thought that the coordinates where wrong but I confirmed with Google maps that the coordinates provided are the correct ones – https://www.google.com/maps/place/38%C2%B000'07.1%22N+23%C2%B043'04.6%22E/@38.0019742,23.7157413,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d38.00197!4d23.71793
Formula used:
IMAGE(‘https://maps.googleapis.com/maps/api/staticmap?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&zoom=13&size=300×200&markers=color:red|label:C|’, ‘Contact Location’)
Any insight on the issue?
Also I noticed that for the already present contacts there is no option of inserting the Lat and Long coordinates. Is it possible to “update” the records present in the object via import wizard Or I will need to export, include the lat. and lon. coordinates and then import again?
Wish you all the best
With regards
Dimitrios
By Naveen Sharma
March 8, 2019Hello Naval
Revisiting the case to provide the following insight
Created a formula field (Text) in the Account object and used the following formula
IMAGE(
“http://maps.google.com/maps/api/staticmap?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX¢er=” + BillingStreet + “,” + BillingCity + “,” + BillingState + ” ” + BillingPostalCode +”&zoom=13&size=650×250&markers=color:blue|” + BillingStreet + “,” + BillingCity + “,” + BillingState + ” ” + BillingPostalCode + “&sensor=false&format=png32” , “no map available”, 250, 650)
This time the map shows correctly.
Any advise on previous fault?
With regards
Dimitrios