Apex Code Development You need to sign in to do that
Don't have an account?
James McCarthy 2 How to insert Google Maps API key in VF script
Hi All - I have a script I've been using to embed Google Maps on a VisualForce page (see code block below). The map has worked for a couple of years now but within the past week or so I have been getting a NoAPIKeys error. So I went and got an API key and inserted the following in line 4 but its still not working (no error now, just a blank box). Any ideas would be greatly appreciated!
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[inserted my API key here]&callback=initMap" type="text/javascript"></script>This is the full maps code, which was working fine until recently:
<apex:page standardController="Data_Center__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: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = "{!Data_Center__c.Street__c} {!Data_Center__c.city__c} {!Data_Center__c.State__c}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Data_Center__c.Name}</b><br>" + address + " "
});
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: "{!Data_Center__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! 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:465px;
// min-width:300px;
background:transparent;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</apex:page>
If it fails to load again, open Web Console / Javascript console in your browser to see the Google Maps Error code. This will help you with the steps you need to take to resolve the error, if any.
All Answers
If it fails to load again, open Web Console / Javascript console in your browser to see the Google Maps Error code. This will help you with the steps you need to take to resolve the error, if any.