Member Avatar for ggeoff

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
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ggeoff
Member Avatar for cereal

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
Member Avatar for ggeoff

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 because: typo
Member Avatar for ggeoff

I have rechecked my code and can't find any differences from the example on Click Here

Member Avatar for ggeoff

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 because: typo
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.