function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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 >
<head>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></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
        map.setCenter(results[0].geometry.location);
        
        //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() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition()); 
        });
        
      }
      
    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Opportunity.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>

 
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)

https://success.salesforce.com/answers?id=90630000000guBkAAI
 
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
Sandhya