Menu
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>
339
In summary, it's always caused by trying to use the Google Maps API (or some other Google API) before it's loaded. This can be fixed by either changing up the import order, using something like jQuery to run your code after the whole page has loaded, or by making sure your browser isn't the problem.
Unless a valid API key is present, the map will be displayed in a lower resolution and will have a watermark on it. If the credit card linked to the account is invalid or the number of free map views is surpassed, the "This Page Can't Load Google Maps Correctly" error will show up.
Go to the Google Maps Platform > Credentials page. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
If you people are getting Error in console then here is the simple solution that I applied.
include the script files in given sequence..
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
You must first include 'maps.googleapis.com/maps/api/js?sensor=false' first then go for jquery library and remove it from below both (it will work.) I hope it will definitely work.
152
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
