Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
APN09217013342392059APN09217013342392059 

google map not showing up on Visualforce page

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>

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 ?
kaustav goswamikaustav goswami
Can you please view the rendered html and check the element id for the div (map-canvas). You can check it by either doing a view source and then seraching by "map-canvas".
kaustav goswamikaustav goswami
This is a sample code that I had developed.

This might help you. You are doing exactly the same thing.

<apex:page id="mapDemoPage" controller="GIntMapsDemoController" title="Location Finder">
    
    <apex:includeScript value="https://maps.googleapis.com/maps/api/js?language=en" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" />
    
    <apex:pageBlock id="mapDempBlock" title="Google Maps Demo">
        <apex:pageBlockSection id="mapDemoSection" columns="1">
            <apex:pageBlockSectionItem id="mapDemoSecItem">
                <apex:outputText id="tText" value="Google Map Sample Demo" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock id="theMapBlock" title="Google Map">
        <apex:outputPanel id="mapPanel" layout="block" style="width:500px; height: 500px;border: 1px solid black;">
        </apex:outputPanel>
    </apex:pageBlock>
    
    <script type="text/javascript">
        //mapDemoPage:theMapBlock:mapPanel
        j$ = jQuery.noConflict();
        j$(document).ready(function(){
            // call method to load maps
            initMaps();
        });
        
        function initMaps(){
            var myOptions = {
                center: {lat: -34.397, lng: 150.644},
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            }
            var gMap = new google.maps.Map(document.getElementById("mapDemoPage:theMapBlock:mapPanel"), myOptions);
        }
    </script>
</apex:page>

I would also suggest to avoid the window onload event in case of visual force pages. At time salesforce has some native functions that gets called on the onload event. Adding a custom onload event at times messes them up. So please use the jQuery(document).ready() function.

Let me know if this helps.

Thanks,
Kaustav
Avidev9Avidev9
Can you add

#map-canvas { min-height:600px}

in your style ? and check what happens ?