function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Beth Gonzalez 3Beth Gonzalez 3 

Can you create a google map that displays opportunities?

I am trying to determine if it is possible to create interactive map of opportunities using google maps? If yes, how would I go about building it?

I found some code in the developer forum (see below) is this somethiing I can use to create what I need?
<apex:page standardController="Opportunity">
<apex:pageBlock >
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script> 
<script type="text/javascript"> 
$(document).ready(function() {
  var myOptions = {
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  var map;
  var marker;
  var geocoder = new google.maps.Geocoder();
  var address = "{!Opportunity.Account.ShippingStreet}, " + "{!Opportunity.Account.ShippingCity}, " + "{!Opportunity.Account.ShippingCountry}";
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Opportunity.Account.Name}</b><br>{!Opportunity.Account.ShippingStreet}<br>{!Opportunity.Account.ShippingCity}, {!Opportunity.Account.ShippingPostalCode}<br>{!Opportunity.Account.ShippingCountry}</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
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Opportunity.Account.Name}"
        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
        google.maps.event.addListener(infowindow, 'closeclick', function() {
    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Opportunity.Account.Name}'s address could not be found, please make sure the address is correct.");
  function resizeIframe() {
    var me =;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
#map {
  font-family: Arial;
  line-height:normal !important;
<div id="map"></div> 

Best Answer chosen by Beth Gonzalez 3
SandhyaSandhya (Salesforce Developers) 
Hi Beth Gonzalez,

Please refer below link I used this with the account you could try for the opportunity.(As similar to the above code you posted)
Hope this helps you!

Please mark it as Best Answer if my reply was helpful. It will make it available for other as the proper solution.

Thanks and Regards