Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag -
i'm trying put div tag shows map (<div id="map-canvas"></div>) inside div, doesn't show map way. css or javascript problem? or way api works?
here's code the nested div:
<!doctype html> <html> <head> <title>simple map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script> <script> var map; function initialize() { var mapoptions = { zoom: 8, center: new google.maps.latlng(-34.397, 150.644), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div> <!-- ommiting div show map --> <div id="map-canvas"></div> </div> </body> </html>
add style="width:100%; height:100%;" div see
not #map_canvas main div
example
<body> <div style="height:100%; width:100%;"> <div id="map-canvas"></div> </div> </body> there other answers on here explain why necessary
Comments
Post a Comment