Google map failed to load

Question

I need to integrate a google map in my web page. I generated a API. But the map is not displaying. I am testing it in my local server.

<h3>My Google Maps Demo</h3>
<div id="map">
    <span class="labels">Heading</span>
</div>
<script  src="https://maps.googleapis.com/maps/api/js?key=[API]&callback=initMap">
</script>
<script type="text/javascript">
    function initMap() {
                alert("Yes");
                var uluru = { lat: -25.363, lng: 131.044 };
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: uluru
                });
                var marker = new google.maps.Marker({
                    position: uluru,
                    map: map
                });
            }
</script>

but no use. Is their any issue in my code? Can i check my API is working or not

@john Java != JavaScript. Oh wait... Maybe he thinks that C# is Java and Java is JavaScript! — DogeAmazed, Oct 27 '17 at 06:38

score 3 · Answer 1 · edited Feb 21 '19 at 13:18

3

I cannot comment, so I write here. Do you have key code?

In console, there are errors:

RefererNotAllowedMapError Error
The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.

See API keys in the Google API Console. For more information, see best practices for securely using API keys.

Maybe this would help you.

edited Feb 21 '19 at 13:18

noob

774
1
10
23

answered Oct 27 '17 at 06:31

N00b

148
11

Yes i have . i generated it – Jks Oct 27 '17 at 06:32

K K · Accepted Answer · 2017-10-27T06:49:37.240

1

You need to have api key to access the maps. Modify your code like this:

JS:

 function initMap() {
   alert("Yes");
   var uluru = {
     lat: -25.363,
     lng: 131.044
   };
   var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 4,
     center: uluru
   });
   var marker = new google.maps.Marker({
     position: uluru,
     map: map
   });

 }
 google.maps.event.addDomListener(window, "load", initMap);

Check this demo: http://jsfiddle.net/lotusgodkk/hLenqzmy/64/

You can get the api key from here: https://developers.google.com/maps/documentation/javascript/get-api-key

edited Oct 27 '17 at 06:49

answered Oct 27 '17 at 06:33

K K

17,794
4
30
39

I generated an api key such as AIzaSyBLM2...............MrhsuACbI and replace it in the code but its not working – Jks Oct 27 '17 at 06:40
found an error in the console as Failed to load resource: the server responded with a status of 404 (Not Found) – Jks Oct 27 '17 at 06:48
the demo is woking but in my local found an error as Uncaught ReferenceError: google is not defined – Jks Oct 27 '17 at 07:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/157639/discussion-between-jks-and-k-k). – Jks Oct 27 '17 at 07:09

score 1 · Answer 3 · answered Oct 27 '17 at 06:37

1

Your code is working fine. You need to place a JavaScript Google API there (I guess you placed another Google Maps Key)

Also check out this link for some google examples

answered Oct 27 '17 at 06:37

Florian Zaskoku

477
3
13

score 0 · Answer 4 · answered Oct 27 '17 at 06:33

0

Also, initMap will be called while the page is loading, and MIGHT not have been declared at the time it was called?

answered Oct 27 '17 at 06:33

Patrick Sturm

393
1
13

Google map failed to load

4 Answers4