You need to sign in to do that
Don't have an account?
DMRae
Google Maps VF page not working
Hi,
I'm trying to built a Google Maps VF for a custom object.
For 3 to 5 seconds it works but then the map changes to this:
It means: "Oops, an error occured. Google Maps was not loaded properly. Please check the Javascript console for technical details."
See the code here:
Any idea why the error occurs?
I'm trying to built a Google Maps VF for a custom object.
For 3 to 5 seconds it works but then the map changes to this:
It means: "Oops, an error occured. Google Maps was not loaded properly. Please check the Javascript console for technical details."
See the code here:
<apex:page standardController="Sample_Object__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 = "{!Sample_Object__c.Street__c} {!Sample_Object__c.city__c} {!Sample_Object__c.Country__c}"; var infowindow = new google.maps.InfoWindow({ content: "<b>{!Sample_Object__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: "{!Sample_Object__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:250px; //min-width:300px; background:transparent; } </style> </head> <body> <div id="map"></div> </body> </apex:page>
Any idea why the error occurs?
You need to pass your API key to JS Script as shown below