3

I am trying a very simple exercise to display a google map on visualforce page. But nothing is showing up.

Below is my page code -

<apex:page controller="SampleLocation">

 <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>



</apex:page>

Below is console log

enter image description here

Below is Network log,

enter image description here

when I preview the page, nothing is shown.

when I save the exact same code in separate html file ( after removing apex:page tag) the code works just fine. I am sure that there is no issue with the API key.

any idea what is going wrong here ?

  • I suggest in future you post your code as text (and use the {} to format it). That way people can take and run an exact copy to try to help you. – Keith C Aug 15 '14 at 23:26
  • corrected and added page code as text – apn Aug 16 '14 at 0:24
9

When I use your code with the div set to a hard-coded size:

<div id="map-canvas" style="width: 500px; height: 500px"/>

the map renders.

Remember that your Visualforce page includes a lot of Salesforce CSS and the header and sidebar HTML (that are not present if you just strip out the content into a html file). So you will need to figure out the appropriate CSS styling to apply to get the result you want.

  • it worked, Thx!! – apn Aug 16 '14 at 0:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.