0

Hi
I have been trying to get a google map on one of my websites. In the past I had no trouble. But now having forgotten what I did I googled the topic and found an explanation that required adding javascript to the head section and a div with map-canvas in it. After checking and correcting some typos. I found it didn't work and read somewhere that the installation requires a key. I went to Google and got a key after setting the API to On. But don't know how to enter it. just pasting it after .../js as .../js?key= didn't work and using API_KEY after key= didn't work either.

Edited by ggeoff

2
Contributors
4
Replies
16
Views
2 Years
Discussion Span
Last Post by ggeoff
0

Ok, there is an API key for server applications and another for browser applications, with the Javascript Google Maps API, you must use the browser applications API Key.

Can you play the example code with your key?

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
        </style>
        <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: { lat: -34.397, lng: 150.644},
                    zoom: 8
                };

                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>

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

    </body>
</html>

If you replace API_KEY with yours, you should be able to see the activity usage in the Google Developers Console.

If this does not help you, then please share an example that reproduces your issue.

Edited by cereal

0

Thanks Cereal

Using the above code and my key works ok. I have two Google accounts and find it difficult to find the Google apis section. I can confirm that I have a "key for browser apps (with referers)". Under Referers I have "Any referer allowed".

I'll recheck my code to see if I have any typos.

Edited by ggeoff: typo

1

I have used Winmerge to compare code blocksa and can't find a difference between the code that works and the one I added. So I have just replaced the dodgy code with that which works.

Problem solved cereal thanks.

Edited by ggeoff: typo

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.