0

I'm trying to customize google map but I have a small problem.

Here is the css code:

#map-canvas {
    width: 100%;
    height: 500px;
}

and the js code:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initialize() {
      var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
      var mapOptions = {
        zoom: 4,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

And this is how I initialize the map in html. This example actually works.

<div id="map-canvas"></div>

But when I trying to put my map into some div e.g:

<div>
    <div id="map-canvas"></div>
</div>

It doesn't work. How to fix that ?

/// EDIT Please put this into example.html and try to run. Nothing happens for me.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        function initialize() {
          var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
          var mapOptions = {
            zoom: 4,
            center: myLatlng
          }
          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Hello World!'
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <div>
        <div id="map-canvas"></div>
    </div>
</body>
</html>
  • No issues for me: http://jsfiddle.net/doktormolle/YW4bK/ – Dr.Molle May 05 '14 at 10:22
  • What exactly do you mean by "does not work"? Is the parent div visible? Does it have width and height? – Salman A May 05 '14 at 10:22
  • that should not be a problem. it is okay to keep your 'map-canvas' nested in the page. – Srikanth Kshatriy May 05 '14 at 10:26
  • I've added the complete html code. Check it out. –  May 05 '14 at 10:35
  • 1
    The css from the complete HTML-code differs from the CSS you've posted at first. The parent div of the #map-canvas needs a height too when you use a percentual height for #map-canvas – Dr.Molle May 05 '14 at 10:39
  • What a fatal mistake. Thanks for help Dr.Molle. –  May 05 '14 at 10:44
  • possible duplicate of [Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag](http://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag) – geocodezip May 05 '14 at 12:45

2 Answers2

0

Your parent div should have height and width defined.

<body>
  <div style="height:100%; width:100%;">
    <div id="map-canvas"></div>
  </div>
</body>

Try This.

For more detail:

Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag

Community
  • 1
  • 1
MayankS
  • 446
  • 1
  • 3
  • 17
0

Nothing seems wrong in your code ,it works fine just seprated css.I have checked and tested.

DEMO

Community
  • 1
  • 1
Wit Wikky
  • 1,542
  • 1
  • 14
  • 28