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
Ted AndersonTed Anderson 

Adding a Google Map to a Custom Object

Hello smart people!

I am a real beginner at saleforce and just cannot seem to get a google map to appear on my custom object.  I cannot for the life of me figure out what I have done wrong.  Do I need a zip code field?

Here is what I have:

<apex:page standardController="Event_Manager__c">

<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: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Event_Manager__c.Street_Address__c}, " + "{!Event_Manager__c.City__c}";

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Event_Manager__c.Name}</b><br>{!Event_Manager__c.Street_Address__c}<br>{!Event_Manager__c.City__c}<br>"
  });

  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: "{!Event_Manager__c}"
        });

        //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! {!Event_Manager__c.Name}'s billing 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;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div>
</body>
</apex:page>


Thank you in advance anyone who takes the time to look at this
Amritesh SahuAmritesh Sahu
Hi Ted,

Try this code
<apex:page standardController="Candidate__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 = "{!Candidate__c.Street__c} {!Candidate__c.city__c} {!Candidate__c.State_Province__c}";
  var infowindow = new google.maps.InfoWindow({
  content: "<b>{!Candidate__c.First_Name__c}</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: "{!Candidate__c.First_Name__c}"
        });

        //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>

Just replace the street, city and state reference with your field names.

If the address field is of multiple lines then replace it with {!SUBSTITUTE(JSENCODE(Object.Fieldapiname),'\n',' ')}
Like var address = "{!Candidate__c.Street__c} {!Candidate__c.city__c}"; becomes
var address = "{!SUBSTITUTE(JSENCODE(Candidate__c.Street__c),'\n',' ')} {!SUBSTITUTE(JSENCODE(Candidate__c.city__c),'\n',' ')}";

User-added image

Thanks
Amritesh
Ted AndersonTed Anderson
Worked like Charm!  Thank you Amritesh
Amritesh SahuAmritesh Sahu
Hi Ted,

Glad to help you.
Please mark this as solved so that it may help others.

Regards.
Jeff Andrews 3Jeff Andrews 3
Amritesh and others...
I'm trying to build a Candidate Map like the one in the Force.com Fundamentals book which uses the no longer active Yahoo Maps integration. I tried using your Google code above and modifying it for this particular example (a Positions object which will map all candidates for a specific position record. Unfortunately, I can't get a map to display.

Any thoughts from anyone? Here's my code...
Thanks - Jeff

<apex:page standardcontroller="Position__c">
This map shows the locations of candidates who have applied for the {!Position__c.Name} position.

<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 = "{!Candidate__c.Street__c} {!Candidate__c.city__c} {!Candidate__c.State_Province__c}";
  var infowindow = new google.maps.InfoWindow({
  content: "<b>{!Candidate__c.First_Name__c}</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
        <apex:repeat var="ja" value="{!Position__c.job_applications__r}">
                counter++;
                var address = {!ja.Candidate__r.Street__c}, {!ja.Candidate__r.City__c}, {!ja.Candidate__r.State_Province__c};
                var infowindow = new google.maps.InfoWindow({
                content: "<b>{!ja.Candidate__r.First_Name__c}</b><br>" + address + " "
                });
                marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                <!-- title: "{!ja.candidate__r.Street__c}, {!ja.candidate__r.City__c}, {!ja.candidate__r.State_Province__c}"); -->
                <!--marker.personName = "{!SUBSTITUTE(LINKTO(ja.candidate__r.First_Name__c + ' ' + ja.candidate__r.Last_Name__c, $Action.Candidate__c.View, ja.Candidate__c),'"','')}";
                marker.addLabel(counter);     -->    
            
            </apex:repeat>
        
     <!--   marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Candidate__c.First_Name__c}"
        }); -->

        //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>
Chris MarzellaChris Marzella
This code worked great but how do I make the map a little taller? The zoom out feature is cut off. Also how can we make it so that on a click it bring up directions like the standard salesforce feature?
Michael RaveMichael Rave
You can make the zoom out feature visible by changing the attribute "height:200px;" within the last <style>.
Would be also interested in the direction feature, if anyone has a good idea of how to implement it here? :)
Saikiran KolliSaikiran Kolli
Hi Amritesh Sahu,
Great Help. Could you please help me in finding  thousands of records.
Alex FortuneAlex Fortune
Please forgive my ignorance but I just wanted to verify before I pursue this any further that this would be added to a visualforce page and not another feature that I'm over-looking.

Thanks for the help!

Best,
Alex
Anna Dovgonos 11Anna Dovgonos 11
Hey Amritesh, AWESOME!! Thank you very much!!!!  :)

Just in case someone is also getting following Error Message after implementing the code:
Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.

Here is the link to the article with the solution to it:
https://developer.salesforce.com/forums/?id=9060G000000I5mnQAC

You lately need to integrate the Google Key into the code- and then its working fine! :)
 
Pat BertulliPat Bertulli
Well, I am a real beginner. I see the formula above but where do I put it? Do I create a new field? or is it something else? I really  need help on this one.
When they mention a Visual Force page, where do I go to get that?? help!
 
Kerrie Tanksley 5Kerrie Tanksley 5
I have the code but the page is showing only a blank space where the map should be displaying. Any help? Anyone? Thanks in advance!
sharath jallu 9sharath jallu 9
@Amritesh Sahu  I want the same functionality for the same code in sfdc lightning .. can u help out by providing step by step procedure as im beginner in lightning.. :)
Rachuri LakshminarayanaRachuri Lakshminarayana
record was created but its doesnot shown map...may i know whats the error