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
Dman100Dman100 

google map in Visual Force page

I am trying to use the Google Map API within a VisualForce page.  When I loaded the page, at first I recieved a popup message:

 

"This page contains both secure and nonsecure items. Do you want to display the nonsecure items?"

 

I clicked yes and got the second error message:

 

"The google map api used on this website was registered for a different website. You can generate a new key for this web site at http://code.google.com/apis/maps/"

 

I clicked okay and then got the last error message:

 

"Sorry, the Google Map API is not compatible with this browser", which is an alert generated from the page.

 

Here is the code from my VF page:

 

<apex:page >
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcn3jr8NWINKSai8qG8PFdxRs1Do3hJpydJcXY0tUUBLv1Zo5cxRK1kMTwg0bE3GZaR4cMFO1zlTWPg" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">

    <div id="map" style="width: 750px; height: 650px"></div>

    <form onsubmit="showAddress(); return false">
        <input id="search" size="60"> 
        <input type="submit" value="Go!"> 
        <input onclick="javascript&colon;map.clearOverlays();return false" type="button" value="Clear markers"> 
    </form>
    
    <div id="message"></div>
    
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>
 

    <script type="text/javascript">
    //<![CDATA[
    
    if (GBrowserIsCompatible()) { 

      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.    
      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

      // Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(33.526513, -112.052307), 10);

      // Add the URL to the saved map that you want to overlay
      // Navigate to the saved map and click on the View in Google Earth and save the KML file to obtain the URL
      var kml = new GGeoXml("http://maps.google.com/maps/ms?hl=en&ie=UTF8&oe=UTF8&msa=0&msid=109968706900961076354.00045a148c8714652d29d&output=kml");
      map.addOverlay(kml);
      
      
      
      // ====== Create a Client Geocoder ======
      var geo = new GClientGeocoder(null, "ABQIAAAAcn3jr8NWINKSai8qG8PFdxRs1Do3hJpydJcXY0tUUBLv1Zo5cxRK1kMTwg0bE3GZaR4cMFO1zlTWPg"); 

      // ====== Array for decoding the failure codes ======
      var reasons=[];
      reasons[G_GEO_SUCCESS]            = "Success";
      reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address: The address was either missing or had no value.";
      reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address:  No corresponding geographic location could be found for the specified address.";
      reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address:  The geocode for the given address cannot be returned due to legal or contractual reasons.";
      reasons[G_GEO_BAD_KEY]            = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
      reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
      reasons[G_GEO_SERVER_ERROR]       = "Server error: The geocoding request could not be successfully processed.";
      
      // ====== Geocoding ======
      function showAddress() {
          var search = document.getElementById("search").value;
          // ====== Perform the Geocoding ======        
          geo.getLocations(search, function(result) {
              // If that was successful
              if (result.Status.code == G_GEO_SUCCESS) {
                  // How many resuts were found
                  document.getElementById("message").innerHTML = "Found " + result.Placemark.length + " results";
                  // Loop through the results, placing markers
                  for (var i = 0; i < result.Placemark.length; i++) {
                      var p = result.Placemark[i].Point.coordinates;
                      var marker = new GMarker(new GLatLng(p[1], p[0]));
                      document.getElementById("message").innerHTML += "<br>" + (i + 1) + ": " + result.Placemark[i].address + marker.getPoint();
                      map.addOverlay(marker);
                  }
                  // centre the map on the first result
                  var p = result.Placemark[0].Point.coordinates;
                  map.setCenter(new GLatLng(p[1], p[0]), 14);
              }
              // ====== Decode the error status ======
              else {
                  var reason = "Code " + result.Status.code;
                  if (reasons[result.Status.code]) {
                      reason = reasons[result.Status.code]
                  }
                  alert('Could not find "' + search + '" ' + reason);
              }
          }
        );
      }
      
      
      
      
      
      // Set up three markers with info windows 
    
      /*var point = new GLatLng(43.65654,-79.90138);
      var marker = createMarker(point,'<div style="width:240px">Some stuff to display in the First Info Window. With a <a href="http://www.econym.demon.co.uk">Link<\/a> to my home page<\/div>')
      map.addOverlay(marker);

      var point = new GLatLng(43.91892,-78.89231);
      var marker = createMarker(point,'Some stuff to display in the<br>Second Info Window')
      map.addOverlay(marker);

      var point = new GLatLng(43.82589,-79.10040);
      var marker = createMarker(point,'Some stuff to display in the<br>Third Info Window')
      map.addOverlay(marker);*/

    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>
    </script>
  </body>

</html>
</apex:page>
 
I can generate a new key for the correct url.
 
Why is the error occuring for browser incompatibility?
 
How can I correct the error for nonsecure items?
 
Thanks for any help.
Regards.
Message Edited by Dman100 on  02-22-2009 08:47 AM


Ron HessRon Hess
What browser?
 
Please avoid using body onload() in a visualforce page, this is used by Visualforce and may replace your method
or your method may overwrite the visualforce onload(). 
 
the message about   nonsecure items can be configured in the browser options usually. 
 
 
Message Edited by Ron Hess on  02-22-2009 05:51 PM


wesnoltewesnolte
I had a similar issue with keys, make sure that you register the domains but don't use the asterisks as suggested in the code comments i.e.
 
http://force.com
http://salesforce.com
 
Wes 


VjartzmusicVjartzmusic
he I am unable to register the domain no matter what! I have probably tried everything from
 
https://c.na3.visual.force.com
 
to 
 
https://na3.visual.force.com
 
please let me know what your thoughts are my google maps is being rendered from a visual force page