Question

122

Google Maps API - Map Is Not Loaded

rated 0 times [ 124] [ 2] / answers: 1 / hits: 27358 / 11 Years ago, fri, march 29, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

devlin

Add To Favorites

Follow

Total Points: 474

Total Questions: 113

Total Answers: 100

Location: Sweden

Member since Fri, Apr 16, 2021

3 Years ago

devlin questions

1 How to watch public directory in Vite project for hot-reload?

Tue, Oct 19, 21, 00:00, 3 Years ago

1 how detect an element move (changing position) in document?

Tue, Apr 27, 21, 00:00, 3 Years ago

1 Difference between router.pathname and router.route in nextjs

Sat, Dec 19, 20, 00:00, 3 Years ago

1 Postman: custom signing request with SHA256 and RSA

Sat, Oct 31, 20, 00:00, 4 Years ago

1 disable fullscreen mode on html video on mobile devices

Fri, Aug 28, 20, 00:00, 4 Years ago

View All

answered 11 Years ago virginia · Accepted Answer

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>