+ Start a Discussion

google map not showing up on Visualforce page

Below is my page code,

<apex:page controller="SampleLocation">

    <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% }
    <script type="text/javascript"
    <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"),
      google.maps.event.addDomListener(window, 'load', initialize);
    <div id="map-canvas"/>


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:pageBlock id="theMapBlock" title="Google Map">
        <apex:outputPanel id="mapPanel" layout="block" style="width:500px; height: 500px;border: 1px solid black;">
    <script type="text/javascript">
        j$ = jQuery.noConflict();
            // call method to load maps
        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);

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.

Can you add

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

in your style ? and check what happens ?