CODEWITHSUNDEEP
htmlgoogle-mapsgoogle-maps-api-3
bodokaiser
bodokaiser

Reputation: 15742

Google Maps renders gray/beige box

I want to embed a Google Map by using the v3 api:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="map"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&key=mykey&sensor=false&region=DE"></script>
    <script>
      new google.maps.Map(document.querySelector('div.map'), {
        zoom: 4, center: new google.maps.LatLng(0, 0)
      });
    </script>
  </body>
</html>

The result is that it successfully loads all ajax and renders them into the div.map but the map is beige/gray and the controls are missing.

Note:

So please do not advice anything of the aboves - I tried them already!

So what am I doing wrong?

Bodo

Upvotes: 0

Views: 1958

Answers (2)

geocodezip
geocodezip

Reputation: 161334

mapTypeId is required per the documnetation

mapTypeId MapTypeId The initial Map mapTypeId. Required.

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="map" style="height:500px; wiodth:600px;"></div>
    <script src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&region=DE"></script>
    <script>
      new google.maps.Map(document.querySelector('div.map'), {
        zoom: 4, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    </script>
  </body>
</html>

working example

Upvotes: 1

duncan
duncan

Reputation: 31912

As per Google's examples, add some CSS to make the map show at a certain size:

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  .map { height: 100% }
</style>

Try assigning the map to a variable:

var map = new google.maps.Map(...)

Upvotes: 0

Related Questions