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="=[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

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

• javascript
• html
• google-maps

• 1 Forgive my impertinence, but isn't that JS, not C#? – ProgrammingLlama Commented Oct 27, 2017 at 6:33
• 2 @john Java != JavaScript. Oh wait... Maybe he thinks that C# is Java and Java is JavaScript! – DogeAmazed Commented Oct 27, 2017 at 6:38

4 Answers 4

I cannot ment, 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.

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/lotusgodkk/hLenqzmy/64/

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

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

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