CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user7404620
user7404620

Reputation: 31

Google Maps API - map not displaying - no errors

I need your help please. I want to integrate a Google Map with javascript-api.

I do not know what I'm doing wrong. Google JavaScript API is enabled. My Domain is confirmed. In key=YOUR_API_KEY, i have entered my API-KEY.

The Google code example below of the "Simple Map" creates a blank page. No error message is displayed console screenshot

It seems like the script is loaded, but the map will not be displayed.

<!DOCTYPE html>
   <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </style>
      </head>
      <body>
        <div id="map"></div>
        
         <script>        
         var map;
         function initMap() {
         map = new google.maps.Map(document.getElementById('map'), {
         center: {lat: -34.397, lng: 150.644},
         zoom: 8
          });
         }

        </script>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
            async defer></script>
      </body>
   </html>

View this example page on my site map.html

Maybe someone can help me.

Thank You, Chris

Upvotes: 1

Views: 8314

Answers (4)

SKT
SKT

Reputation: 148

In my case, just need to give the height attribute and value (exactly value: like 200px) on the 

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

Like above @NeuTronas said, it solve my problem.

I also find out the official document instruction

https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-TW#if-your-code-isnt-working

Hope this can help you.

Upvotes: 0

A8M4
A8M4

Reputation: 16

First of all sorry for my maybe bad English.

I've had the same problem and found the following answers (In my case the first answer was the correct one):

  • Billing has not been enabled on your account.
  • The provided billing method is invalid (for example an expired credit card).
  • A self-imposed daily limit has been exceeded.

Source: developers.google.com

If you have the same answer, you can signup with a credit card here: console.cloud.google.com

Upvotes: 0

NeuTronas
NeuTronas

Reputation: 273

You are getting "RefererNotAllowedMapError" error from Google script. This means your URL was not successfully added to refferers list. Check if you added. At least on your example page. Try clearing cache or use Incognito window to make sure you are not getting any errors.

EDIT: Also make sure you set height to your map div! (it is set to 0 by default!)

Upvotes: 2

Imran Mohammed
Imran Mohammed

Reputation: 109

Log in to https://console.developers.google.com using your account that consist of google maps api then

  • go to credentials
  • click on your api_key entry from the list
  • Under key restrictions either select none or add HTTP referrers as *.grossen.de/*

Upvotes: 2

Related Questions