We Keep Coding

Uncaught ReferenceError: google is not defined (using Google Maps API)

I'm building a site using Django and when I wanted to put a map with markers(which coordinates I pull from database) it refuses to show the markers, throwing out the error:
Uncaught ReferenceError: google is not defined
On every single occurance of:(3rd block)
var map = google.maps.Map(document.getElementById('map'));
Here's the whole code:
<div id="map" style="height: 60%"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.132330, lng: 23.159630},
zoom: 12
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIOOtr2iADzkBWq3r48fHiZRvnAFcWxHY&callback=initMap"
async defer></script>
{% for place in recent_attraction %}
<script>
var map = google.maps.Map(document.getElementById('map'));
function setMarker() {
var latlng = {lat: {{place.gps_x}}, lng: {{place.gps_y}}}
var marker = new google.maps.Marker({
position: latlng,
map: map
})
}
</script>
{% endfor %}

Your reference error seems to be caused by the order that you have your code executing.
Additionally you could create a function to handle adding your markers. I am at work so I cannot test the following code, but it should get you on the right path.
<div id="map" style="height: 60%"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIOOtr2iADzkBWq3r48fHiZRvnAFcWxHY&callback=initMap" async defer></script>
<script>
var map;
function setMarker(lat, long) {
var latlng = {lat: lat, lng: long}
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.132330, lng: 23.159630},
zoom: 12
});
}
</script>
{% for place in recent_attraction %}
<script>
setMarker({{place.gps_x}},{{place.gps_y}});
</script>
{% endfor %}

The problem in the title was removed by moving var map = google.maps.Map(document.getElementById('map')); inside the function. That didn't remove the problem completely, as I still didn't get the markers on my map. The solution was to move the code inside a single block and a single function, like this:
<div id="map" style="height: 60%"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.132330, lng: 23.159630},
zoom: 12
});
{% for place in recent_attraction %}
var latlng = {lat: {{place.gps_x}}, lng: {{place.gps_y}}}
var marker = new google.maps.Marker({
position: latlng,
map: map
});
{% endfor %}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIOOtr2iADzkBWq3r48fHiZRvnAFcWxHY&callback=initMap"
async defer></script>
Thanks to user Willem Van Onsem.

creating a google map that is connected to database

I am trying to create a google map. the latitude and the longitude are from the database so I had to put those in a textbox then get its value in the script. I tried doing so but it doesn't work will you help me with this one; here's my JavaScript:
function initMap() {
var lat = document.getElementById('lat');
var lang = document.getElementById('lang');
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
Here's the html:
<input type="text" style="display: none" id="lat" value="7.8383054" />
<input type="text" style="display: none" id="lang" value="123.2966657" />
<div id="map" ">
</div>
JSfiddle

the "numbers" in the text fields are access using the .value property:
the lat/lng in a google.maps.LatLngLiteral must be numbers. (without the parseFloat the API throws these errors:
InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
You need to actually call the initMap method (your fiddle isn't doing this)
updated fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<input type="text" id="lat" value="7.8383054" />
<input type="text" id="lang" value="123.2966657" />
<div id="map" ">
</div>
<script>
function initMap() {
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>

Try:
var lat = document.getElementById('lat').value;
var lang = document.getElementById('lang').value;

Not really sure where your problem lies aside from not actually using the value of the text inputs or calling the function that returns those values but perhaps something long these lines might help get you started. If you are needing the user to enter different lat/lng coordinates then you would also need an event handler assigned to listen for changes or a button to submit the new coordinates.
<?php
/*
*/
?>
<!doctype html>
<html>
<head>
<title>Google maps</title>
<script src='https://www.google.com/jsapi' charset='utf-8'></script>
<script src='https://maps.google.co.uk/maps/api/js?key=APIKEY' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
function initMap() {
var uluru = {
lat: document.getElementById('lat').value,
lng: document.getElementById('lang').value
};
var options={
zoom: 4,
center: uluru
};
var map = new google.maps.Map( document.getElementById('map'), options );
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
document.addEventListener( 'DOMContentLoaded', initMap, false );
</script>
<style type='text/css' charset='utf-8'></style>
</head>
<body>
<div id='map'></div>
<div>
<input type='text' id='lat' value='7.8383054' />
<input type='text' id='lang' value='123.2966657' />
</div>
</body>
</html>

call initMap() function in body tag. it will load the map, the most important thing do you have api key ? you also need ssl to use google maps. means your url must be https://yourdomain.com
body onload="initMap()"

google maps javascript v3 api not working

I've tried all possible solutions but the map just isn't showing. My webview just shows blank.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var map; " +
function initialize() {
var latitude = 0;
var longitude = 0;
if (window.android){
latitude = window.android.getLatitude();
longitude = window.android.getLongitude();
}
var myOptions = {
zoom: 20,
center: myLatLng
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
function centerAt(latitude, longitude){
myLatlng = new google.maps.LatLng(latitude,longitude);
map.panTo(myLatLng);
}
</script>
<title>Insert title here</title>
</head>
<body>
<div id="map_canvas" style="height: 100px; width=100px;">This is the map canvas</div>
<script type="text/javascript">initialize();</script>
</body>
</html>
I've narrowed down to this line: map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
When this line is executed, it fails.
Any help is appreciated.
Thanks.
Regards,
Dexter

I can't see myLatLng definition other than in centerAt() function. You need to pass Google Maps LatLng object to the center attribute of myOptions:
var myLatlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 20,
center: myLatLng
}
...
And there is also a strange thing which I can't understand:
var map; " +
^ ^

my bad, submitted the wrong code. Anyway, the major issue here is the connection. That took me a long time to realize it since i was just focusing on the codes.
Thanks.

google.maps.MapOptions + JSON: avoid eval()?

I am searching for an eval() alternative..
I generate a usal google map, API v3.:
// define options
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(-33.890542, 151.274856),
mapTypeId: eval(maptype["map"]),
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true
};
// create map
map = new google.maps.Map(document.getElementById('map_test),mapOptions);
This works as it should, but I want to avoid eval().
maptype is defined via php, using JSON:
echo 'maptype = '.json_encode($options).';';
Is there a alternative for eval?
Update:
the full sourcecode:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.7&sensor=false&language=de"></script>
</head>
<body>
<script>
maptype = {"map":"google.maps.MapTypeId.SATELLITE"};</script>
<script>
function Map()
{
var mapOptions = {zoom: 18, center: new google.maps.LatLng(-33.890542, 151.274856), mapTypeId: eval(maptype["map"])};
// create map
map = new google.maps.Map(document.getElementById('map'),mapOptions);
}
</script>
<div id="map" style="width:1200px; height:800px"></div>
<script> jQuery(document).ready(function ($) {Map();});</script>
</body>
</html>
Result: no error, no map, just a grey background.

You should be able to just remove the eval() call around it and it should work, assuming ngggOptions is an object and has a key for map.

Loading Google Maps

I am trying to load Google Maps in my Javascript, but I keep getting the error 'document.body is null'. Can anybody help?
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=gfgfgfgfgfg"></script>
<script type="text/javascript">
$(document).ready(function () {
google.load('maps','3', {other_params: "sensor=false&callback=mapsLoaded&key=gfgfgfgfgf"});
});
function mapsLoaded()
{
alert("done");
}
</script>

For the version 3 of the API you should try a different approach:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script type="text/javascript">
$(document).ready(function () {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
});
</script>
</head>
<body>
<div id='map_canvas' style="width:450px; height:450px"></div>
</body>
</html>

To get information of a certain position, and not drawing a map it is better to use Google's geocoding services:
ll = new google.maps.LatLng(-34.397, 150.644);
geocoder = new google.maps.Geocoder();
geocoder.geocode({ latLng: ll}, function(res, status){
console.log(status);
console.log(res);
});
For more details on other params please take a look at the API:
http://code.google.com/apis/maps/documentation/javascript/geocoding.html#GeocodingRequests
Hope it helps.

Move your script to inside the closing body tag:
<html>
<head>...</head>
<body>
...
<script> ... </script>
</body>
</html>