+ Start a Discussion
Nuno.CarvalhoNuno.Carvalho 

Hello guys,

I´m trying to put a google maps on my standard object "Account" , i´m using the billing adress for the location, the map works fine for a few seconds than it appears this message:
User-added image

The code i´m using for this is:

<apex:page standardController="Account">
<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 ="{!Account.BillingStreet},{!Account.BillingPostalCode}{!Account.BillingCity}, {!Account.BillingState},{!Account.BillingCountry}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingState}<br>{!Account.BillingCountry}"
});
 
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: "{!Account.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! {!Account.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>
Best Answer chosen by Nuno.Carvalho
GulshanRajGulshanRaj
Hi Nuno.Carvalho,

To use googl api its mandatory to attach your api key now onwards. So you have to generate your own key and attach to script.
Please follow below link and generate your own api key 
https://developers.google.com/maps/documentation/javascript/get-api-key

After generating key add your api key to "YOUR_API_KEY" mentioned below.
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript">
Please let me know if you still facing any issue.

Thanks
Gulshan Raj
 

All Answers

GulshanRajGulshanRaj
Hi Nuno.Carvalho,

To use googl api its mandatory to attach your api key now onwards. So you have to generate your own key and attach to script.
Please follow below link and generate your own api key 
https://developers.google.com/maps/documentation/javascript/get-api-key

After generating key add your api key to "YOUR_API_KEY" mentioned below.
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript">
Please let me know if you still facing any issue.

Thanks
Gulshan Raj
 
This was selected as the best answer
Nuno.CarvalhoNuno.Carvalho
Hi Gulshan,
It worked perfectly, thanks for your explanation,
Thanks,
Nuno C.