javascript - Uncaught ReferenceError: google is not defined

Question

Welcome To Ask or Share your Answers For Others

javascript - Uncaught ReferenceError: google is not defined

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Uncaught ReferenceError: google is not defined

I want to use geolocation and direction function, but there is google is not defined error. the code is as below:

function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true" + "&callback=initialize";
            document.body.appendChild(script);
        }

It seems that the loadScript does not work!

var mapOptions = {
                zoom : 13,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

The error jumps out from here. Is anyone who know how to figure it out? I need to use key to get the geolocation service, so I cannot use simple

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:48:27+0000

I tried it on my own with this code - it worked fine for me

Dynamic with key

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {  height: 100%; }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #map_canvas { height: 100%;}
    </style>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        }
        var myKey = "ENTER_YOUR_KEY_HERE";
        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?key=" + myKey + "&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }
    </script>
</head>
<body onload="loadScript()">
    <div id="map_canvas" style="width: 100%; height: 100%">
    </div>
</body>
</html>

Static without key

  ...
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script>
</head>
<body onload="initialize()">
   ...

When surfing through the net I tumbled over an important note!

Google Maps JavaScript API v3

The Google Maps JavaScript API v3 does not require an API key to function correctly. However, we strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application's Maps API usage. Learn how to use an APIs Console key.

See Google Maps API

So, apparently you no longer need a developer key! I tried it with both - static no key and dynamnic with key - both worked.

Categories

javascript - Uncaught ReferenceError: google is not defined

javascript - Uncaught ReferenceError: google is not defined

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags