javascript - 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=";callback=initMap"
            async defer></script>
      </body>
   </html>

View this example page on my site map.html

Maybe someone can help me.

Thank You, Chris

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

Share Improve this question asked Jan 11, 2017 at 13:54 user7404620 311 silver badge2 bronze badges

There are errors. Look at the javascript console: Google Maps API error: RefererNotAllowedMapError https://developers.google./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 Commented Jan 11, 2017 at 15:42
1 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 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 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 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 Commented Jan 12, 2017 at 9:17

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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

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

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.

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

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./maps/documentation/javascript/tutorial?hl=zh-TW#if-your-code-isnt-working

Hope this can help you.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744940469a4602290.html

javascript - Google Maps API - map not displaying - no errors - Stack Overflow

4 Answers 4

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Google Maps API - map not displaying - no errors - Stack Overflow

4 Answers 4

相关推荐