You need to sign in to do that
Don't have an account?

Google maps integration
Hi,
Please can you help me :( I'm trying to implement a VF page that displays (via a section on an Account page) a Google Maps view of where a customer is based based on their shipping address. I have the below page written up but it's just not working - I'm simply getting a grey box where the map should be.
(NB: API key has been redacted, but there is a valid key in there)
I've tried several methods of troubleshooting this but getting no joy, appreciate your help.
Thanks in advance,
Dan
Please can you help me :( I'm trying to implement a VF page that displays (via a section on an Account page) a Google Maps view of where a customer is based based on their shipping address. I have the below page written up but it's just not working - I'm simply getting a grey box where the map should be.
(NB: API key has been redacted, but there is a valid key in there)
I've tried several methods of troubleshooting this but getting no joy, appreciate your help.
Thanks in advance,
Dan
<apex:page standardController="Account"> <apex:pageBlock > <head> <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=[REDACTED-API-KEY]&sensor=false"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?key=[REDACTED-API-KEY]"></script> <script type="text/javascript"> $(document).ready(function() { var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.roadmap, mapTypeControl: false } var map; var marker; var geocoder = new google.maps.Geocoder(); var address = "{!Account.ShippingStreet}, " + "{!Account.ShippingCity}, " + "{!Account.ShippingPostalcode}"; var infowindow = new google.maps.InfoWindow({ content: "<b>{!Account.Name}</b>" }); 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 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:500px; background:transparent; } </style> </head> <body> <div id="map"></div> </body> </apex:pageBlock> </apex:page>
Below are some of the links that will help you to achieve this:
http://forceguru.blogspot.in/2012/01/integrating-google-maps-in-salesforce.html
https://eshopsync.com/integrate-google-map-api-salesforce-2/
https://success.salesforce.com/answers?id=90630000000guBkAAI
If it helps, please mark this as best answer.
Thanks,
Neetu
All Answers
Below are some of the links that will help you to achieve this:
http://forceguru.blogspot.in/2012/01/integrating-google-maps-in-salesforce.html
https://eshopsync.com/integrate-google-map-api-salesforce-2/
https://success.salesforce.com/answers?id=90630000000guBkAAI
If it helps, please mark this as best answer.
Thanks,
Neetu
We do not require Google API is.
Let me know if anyone wants to implement the solution.
Email: sfdc.avadhut@gmail.com
Thanks,
Avadhut