+ Start a Discussion

Hi Can anyone give an idea how to resolve this..i am having custom object,in which i have fields like state,city,street adress ,zip,with these information i want a map in the same object record..is this possible..

i tried this https://eshopsync.com/integrate-google-map-api-salesforce-2/   (https://eshopsync.com/integrate-google-map-api-salesforce-2/  )
below is my code:
<apex:page standardController="Location__c">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var myOptions={ zoom: 15,mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl: false };
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address ="{!Location__c.Street_Address__c},{!Location__c.Zip__c}{!Location__c.City__c}, {!Location__c.State__c},{!Location__c.Country__c}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Location__c}</b><br>{!Location__c.Street_Address__c}<br>{!Location__c.City__c}, {!Location__c.Zip__c}<br>{!Location__c.State__c}<br>{!Location__c.Country__c}"
geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK&&results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
//center map
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Location__c.Name}"
//add listeners
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.addListener(infowindow, 'closeclick', function() {
} else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! {!Location__c.Name}'s billing address could not be found, please make sure the address is correct.");
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes&&iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
#map {
font-family: Arial;
line-height:normal !important;
<div id="map"></div>

its working but getting this pop up window..can anyone help to avoid that one..User-added image
Khan AnasKhan Anas (Salesforce Developers) 
Hi Anitha,

I trust you are doing very well.

You need to get an API key and pass that key as part of the request to Google. If you already have a developer Gmail login, use that. Otherwise, create a new one.

After logging into Gmail go to https://developers.google.com/maps/documentation/javascript/get-api-key 

From the Visualforce page where you've saved the code for this map, you need to update the two lines to include the API key you generated.
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=INSERT API KEY HERE"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Please refer this doc- https://developers.google.com/maps/documentation/javascript/tutorial

Note: Google will now be charging for use of their maps API if you exceed their free usage threshold. It also appears that every google maps user (not Salesforce user) MUST create a billing account to use the API. 
You can refer to the Google Maps Platform documentation (https://developers.google.com/maps/documentation/javascript/v2tov3) and you can able to get around it.
Please refer below links for more information on Google API Key:



I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas