Google Maps API - map not displaying - no errors

Question

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

There are errors. Look at the javascript console: Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://grossen.de/map.html. Add that URL (or a wildcard URL that includes it) to the allowed referrers for your key. — geocodezip
– geocodezip, Commented Jan 11, 2017 at 15:42
Setting your map element to a % height might not be a good idea. Once you edited the referrers as explained in the answer(s), if you still don't see your map, try setting the map element height to a fixed height like 500px instead of 100%. — MrUpsidown
– MrUpsidown, Commented Jan 11, 2017 at 16:08
If you then need to know how you can have your map container height expressed as a relative height (%), search this website for answers (there are many) or ask another question if you can't figure it out. — MrUpsidown
– MrUpsidown, Commented Jan 11, 2017 at 16:15
oh, it works! the div.#map ignore the styles in <head> If i add style attributes direktly to the div like <div id="map" style="width:500px; height:200px;"></div> I don´t know why, but it works! - thanks — user7404620
– user7404620, Commented Jan 11, 2017 at 17:48
There is no reason for the map to "ignore" the styles in the head section. Anyway, as good practice you should do that in a separate CSS file but styles in the head should work too. — MrUpsidown
– MrUpsidown, Commented Jan 12, 2017 at 9:17

Imran Mohammed · Accepted Answer · 2017-01-11 14:11:22Z

2

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/*

answered Jan 11, 2017 at 14:11

Imran Mohammed

1094 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7404620 Over a year ago

I`ve added .grossen.de/ bevore, and also i´ve tryed it without restrictions - both don´t work...

Imran Mohammed Over a year ago

I can see that you have resized the map div. Call the following function inside initMap() google.maps.event.trigger(map, 'resize');

NeuTronas · Accepted Answer · 2017-01-11 18:43:08Z

2

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!)

edited Jan 11, 2017 at 18:43

answered Jan 11, 2017 at 14:03

NeuTronas

2733 silver badges12 bronze badges

4 Comments

Sean Kendle Over a year ago

I'll second this, you need a width on the map in addition to the API permissions.

MrUpsidown Over a year ago

What about explaining clearly where OP has to do that? Link to the console, etc.?

MrUpsidown Over a year ago

Regarding your edit: it's true that you have to set a height, and OP did set a height but in %, which might trigger issues. You don't need to set a width and the default width is not 0.

MrUpsidown Over a year ago

@SeanKendle No. You don't. But you need a height.

CuriousSuperhero · Accepted Answer · 2018-09-09 16:18:58Z

0

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

edited Sep 9, 2018 at 16:18

CuriousSuperhero

6,6814 gold badges31 silver badges53 bronze badges

answered Sep 9, 2018 at 15:31

A8M4

161 bronze badge

1 Comment

sohelpme Over a year ago

In the no-valid-payment-methods case, it may take as long as 10 days for the map to begin displaying after adding a bank account (cloud.google.com/billing/docs/how-to/payment-methods).

SKT · Accepted Answer · 2019-01-17 06:56:07Z

0

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.

edited Jan 17, 2019 at 6:56

answered Jan 16, 2019 at 7:00

SKT

1582 silver badges4 bronze badges

Collectives™ on Stack Overflow

Google Maps API - map not displaying - no errors

4 Answers 4

2 Comments

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related