• Kerrie Tanksley 5
  • NEWBIE
  • 0 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 5
    Replies
Trying to display Google map on custom object. Works perfectly on another object called 'Members' but I'm getting this error on Locations object. Here is the code. Thank you for helping:

<apex:page standardController="Location__c">
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDSLXBCASOqVNffD3Y0sOMutS2by-2CZZ4&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?key='AIzaSyDSLXBCASOqVNffD3Y0sOMutS2by-2CZZ4'"></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 = "{!Location__c.Street__c} {!Locations__c.state__c} {!Locations__c.zip_code__c}";
  var infowindow = new google.maps.InfoWindow({
  content: " 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.Locations);
 
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.Locations,
            map: map,
            title: " "
        });
        //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>
Trying to display Google map on custom object. Works perfectly on another object called 'Members' but I'm getting this error on Locations object. Here is the code. Thank you for helping:

<apex:page standardController="Location__c">
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDSLXBCASOqVNffD3Y0sOMutS2by-2CZZ4&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?key='AIzaSyDSLXBCASOqVNffD3Y0sOMutS2by-2CZZ4'"></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 = "{!Location__c.Street__c} {!Locations__c.state__c} {!Locations__c.zip_code__c}";
  var infowindow = new google.maps.InfoWindow({
  content: " 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.Locations);
 
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.Locations,
            map: map,
            title: " "
        });
        //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>
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