+ Start a Discussion
ANITHA BEEMU 2ANITHA BEEMU 2 

Hi can anyone help on 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">
<head>
<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
map.setCenter(results[0].geometry.location);
 
//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() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});
}
} 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.");
resizeIframe();
}
});
 
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";
}
}
}
});
</script>
<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:250px;
background:transparent;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</apex:page>

its working but getting this pop up window..can anyone help to avoid that one..
Best Answer chosen by ANITHA BEEMU 2
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  (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:
https://theeventscalendar.com/knowledgebase/setting-up-your-google-maps-api-key/

https://theeventscalendar.com/important-google-maps-api-changes/

https://churchthemes.com/page-didnt-load-google-maps-correctly/


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

All Answers

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  (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:
https://theeventscalendar.com/knowledgebase/setting-up-your-google-maps-api-key/

https://theeventscalendar.com/important-google-maps-api-changes/

https://churchthemes.com/page-didnt-load-google-maps-correctly/


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
This was selected as the best answer
ANITHA BEEMU 2ANITHA BEEMU 2
Hi Khan,Thank you for ur response..some doubt,i am not good with developing if i use api key,whether other users can see the google map when they open the record??
Khan AnasKhan Anas (Salesforce Developers) 
Hi Anitha,

Yes, other users can see the google map on record detail page. Page security is determined by Visualforce Page Security, you can specify which users can execute a particular Visualforce page based on their profile or an associated permission set.

For more information on Visualforce Page Security, you can refer to below links.

https://help.salesforce.com/articleView?id=pages_page_level_security.htm&type=5

https://help.screensteps.com/m/salesforce/l/34860-setting-permissions-for-the-visualforce-page


I hope it helps you.

Kindly mark this as solved if the information was helpful.

Regards,
Khan Anas