Google Maps API - Map Is Not Loaded

javascript html google-maps google-maps-api-3

26,111

Solution 1

Specify the canvas' width and height as absolute lengths rather than %.

For example :

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

Alternatively, stick with % for the canvas but put it inside a container with width and height specified as absolute lengths.

<div style="width:1000px; height:800px;">
    <div id="map-canvas" style="width: 40%; height: 40%"></div>
</div>

Solution 2

In case you don`t want to fix your size to absolute width and height in px, ensure that all parent tags have height 100%

for example html -> body -> some_ids -> map-id

All of them have height and width in %

ref: https://developers.google.com/maps/documentation/javascript/tutorial

26,111

Author by

Admin

Updated on December 28, 2020

Comments

Admin over 3 years

I've been trying to embed a google map in my site , but with not much success. I've used the next code section: (i'm using an actual api key on my own computer)

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=myapikey&sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

inside <body> section i've added <div id="map-canvas" style="width: 40%; height: 40%"></div>

How could I handle this problem ? Thanks in advance