Salesforce Developer Community

James McCarthy 2
NEWBIE
15 Points
Member since 2016

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
2

Questions
1

Replies

How to insert Google Maps API key in VF script

Hi All - I have a script I've been using to embed Google Maps on a VisualForce page (see code block below). The map has worked for a couple of years now but within the past week or so I have been getting a NoAPIKeys error. So I went and got an API key and inserted the following in line 4 but its still not working (no error now, just a blank box). Any ideas would be greatly appreciated!

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[inserted my API key here]&callback=initMap"  type="text/javascript"></script>

This is the full maps code, which was working fine until recently:

<apex:page standardController="Data_Center__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: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Data_Center__c.Street__c} {!Data_Center__c.city__c} {!Data_Center__c.State__c}";
  var infowindow = new google.maps.InfoWindow({
  content: "<b>{!Data_Center__c.Name}</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: "{!Data_Center__c.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! 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:465px;
  // min-width:300px;
  background:transparent;
}
</style>

</head>

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

James McCarthy 2
February 22, 2017
Like
0

2 replies

vCard Export?

I was very surprised to discover that Salesforce Contact Manager edition doesn't have a vcard export for contacts. I tried to install a plugin but apparently the Contact Manager edition doesn't support that either - makes it a little difficult to manage contacts with the Contact Manager (did I mention I have the Contact Manager edition? Just a hint for dev :)

James McCarthy 2
January 28, 2016
Like
0

SOLVED

2 replies

How to insert Google Maps API key in VF script

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[inserted my API key here]&callback=initMap"  type="text/javascript"></script>

This is the full maps code, which was working fine until recently:

<apex:page standardController="Data_Center__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: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Data_Center__c.Street__c} {!Data_Center__c.city__c} {!Data_Center__c.State__c}";
  var infowindow = new google.maps.InfoWindow({
  content: "<b>{!Data_Center__c.Name}</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: "{!Data_Center__c.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! 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:465px;
  // min-width:300px;
  background:transparent;
}
</style>

</head>

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

James McCarthy 2
February 22, 2017
Like
0