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

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.

Related

How Do I Take An Input From A Textbox And Use It To Search For a Location On Google Maps?

I am working on a project and one of the goals is for the user to put a location's name into a textbox and press a button to search for a location on a Google map.
<h2>How to Use</h2>
<p>To use this program, enter a location then click the button to search for it.</p>
<h2>Search Location</h2>
Location: <input type="text" id="myText" value="">
<!-- This creates a textbox --->
<button onclick="searchFunction()">Search</button>
<!-- This creates a button --->
<p id="demo"></p>
<script>
function searchFunction() {
var location = document.getElementById("myText").value;
}
</script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h1>Google Map</h1>
<div id="map"></div>
<script>
function initMap() {
var options = {
zoom: 12,
center: {
lat: 39.7684,
lng: -86.1581
}
}
var map = new google.maps.Map(document.getElementById('map'), options);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhrDQVoc_0FJx4Hy4tsFMKtmX78VNTUhw&callback=initMap">
</script>
<script>
if (location == "Children's Museum") {
function initMap() {
var options = {
zoom: 12,
center: {
lat: 39.810230,
lng: -86.158882
}
}
var map = new google.maps.Map(document.getElementById('map'), options);
var locationTestPosition = {
lat: 39.810230,
lng: -86.158882
};
var marker = new google.maps.Marker({
position: locationTestPosition,
map: map
});
}
</script>
}
This is the code that I currently have. The idea is that the user will insert a place's name and then using an if/else statement, the code will place a marker on the map at the proper coordinates. I cannot seem to get it to work though. I am new to HTML and JavaScript, so this is a lot of learning for me.

How can i pass data from template in Django to Javascript in this specific case

I am using Google map api and i am trying to pass the data (longitude and latitude) to the template then use the data in the javascript to show a specific location.
location.html
{% for venue in property_listing %}
{{ venue.address }}</br>
<div id="long">{{ venue.longitude }}</br>
<div id="lat">{{ venue.latitude }}</br>
{% endfor %}
javascript of the same page
<script>
var latitude = REPLACE HERE;
var longitude = REPLACE HERE;
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: latitude, lng: longitude};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 15, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
I am tried to replace the value literally but it wont work. What is the best way to solve this?
First of all you are assigning your data into a div. Which doesn't have a proper value attribute. Here is a work around by using getAttribute() method.
Assign an attribute named 'value' and it's corresponding data:
location.html
{% for venue in property_listing %}
{{ venue.address }}</br>
<div id="long" value="{{ venue.longitude }}">{{ venue.longitude }}</br>
<div id="lat" value="{{ venue.latitude }}">{{ venue.latitude }}</br>
{% endfor %}
In your javascript function, access the data by getting the attribute of your div ids named value:
<script>
var latitude = document.getElementById('lat').getAttribute("value");
var longitude = document.getElementById('long').getAttribute("value");
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 15, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
This should do the trick:
<script>
var latitude = {{ venue.latitude }};
var longitude = {{ venue.longitude }};
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: latitude, lng: longitude};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 15, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>

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()"

GoogleMaps markers don't work

I'm trying to put three Google Maps markers on a website, but they don't work. I can't figure it out why. I've checked all over again, several times, but I'm a newbie and I can't find the problem.
Here's my JS code
<!-- Google Maps JS -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
function initialize() {
//Locations Coordinates
var myLatlngBusto = new google.maps.LatLng(45.6084,8.850165);
var myLatlngMagnago = new google.maps.LatLng(45.5808394,8.850165);
var myLatlngBienate = new google.maps.LatLng(51.520614,-0.121825);
//Options List
var mapOptionsBusto = {
zoom: 15,
center: myLatlngOH,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsMagnago = {
zoom: 15,
center: myLatlngCA,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsBienate = {
zoom: 15,
center: myLatlngUK,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
//Maps Variables
var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto);
var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago);
var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate);
//Markers List
var markerBusto = new google.maps.Marker({
position: myLatlngBusto,
map: mapBusto,
title: 'Busto Arsizio, via Dante Alighieri, 5'
});
var markerMagnago = new google.maps.Marker({
position: myLatlngMagnago,
map: mapMagnago,
title: 'Magnago, via Goffredo Mameli, 9'
});
var markerBienate = new google.maps.Marker({
position: myLatlngBienate,
map: mapBienate,
title: 'Bienate (fraz. Magnago), Piazzale del Tricolore'
});
}
</script>
And my html code:
<div class="col-md-5">
<p class="dark-section"><i><strong>Busto Arsizio</strong></i>, via Dante Alighieri 5<br/>Palestra scuola media G.A.Bossi</p><br/>
<p class="dark-section"><span>ADULTI:</span><br/>lunedì e giovedì<br/>Inizio ore 20.30, fine ore 22.00</p><br/>
<p class="dark-section"><span>BAMBINI:</span><br/>mercoledì e venerdì<br/>Inizio ore 17.00, fine ore 18.30</p>
</div>
<div class="col-md-7">
<div id="map-Busto"></div>
</div>
<!-- Divider -->
<div class="col-md-12">
<div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div>
</div>
<div class="col-md-5">
<br/>
<p class="dark-section"><i><strong>Magnago</strong></i>, via Goffredo Mameli 9<br/>Palestra scuola elementare Ada Negri</p><br/>
<p class="dark-section"><span>ADULTI:</span><br/>martedì e venerdì<br/>inizio ore 21.00, fine ore 23.00</p><br/>
</div>
<div class="col-md-7">
<div id="map-Magnago"></div>
</div>
<!-- Divider -->
<div class="col-md-12">
<div class="hr5" style="margin-top:20px;margin-bottom:20px;"></div>
</div>
<div class="col-md-5">
<br/>
<p class="dark-section"><i><strong>Bienate (fraz. Magnago)</strong></i>, Piazzale del Tricolore<br/>Palestra scuola elementare Giacomo Leopardi</p><br/>
<p class="dark-section"><span>BAMBINI:</span><br/>lunedì e giovedì<br/>Inizio ore 18.30, fine ore 20.00</p><br/>
</div>
<div class="col-md-7">
<div id="map-Bienate"></div>
</div>
Here you can check the result on the website page: http://westexperiments.altervista.org/index.html
So how do I fix these Google Maps markers?
It looks like you don't trigger initialize().
Add this, at the bottom of your script (line 121 of your online example):
google.maps.event.addDomListener(window, 'load', initialize);
You have a couple of problems:
The function initialize has not been called so the maps wont ever get generated. This can be called on window load by using google.maps.event.addDomListener(window, 'load', initialize);
You are using the variables myLatlngOH, myLatlngCA and myLatlngUK to center the maps - they don't exist and will stop the maps from being generated. I assume these should be myLatlngBusto, myLatlngMagnago and myLatlngBienate instead
function initialize() {
//Locations Coordinates
var myLatlngBusto = new google.maps.LatLng(45.6084, 8.850165);
var myLatlngMagnago = new google.maps.LatLng(45.5808394, 8.850165);
var myLatlngBienate = new google.maps.LatLng(51.520614, -0.121825);
//Options List
var mapOptionsBusto = {
zoom: 15,
center: myLatlngBusto,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsMagnago = {
zoom: 15,
center: myLatlngMagnago,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptionsBienate = {
zoom: 15,
center: myLatlngBienate,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
//Maps Variables
var mapBusto = new google.maps.Map(document.getElementById('map-Busto'), mapOptionsBusto);
var mapMagnago = new google.maps.Map(document.getElementById('map-Magnago'), mapOptionsMagnago);
var mapBienate = new google.maps.Map(document.getElementById('map-Bienate'), mapOptionsBienate);
//Markers List
var markerBusto = new google.maps.Marker({
position: myLatlngBusto,
map: mapBusto,
title: 'Busto Arsizio, via Dante Alighieri, 5'
});
var markerMagnago = new google.maps.Marker({
position: myLatlngMagnago,
map: mapMagnago,
title: 'Magnago, via Goffredo Mameli, 9'
});
var markerBienate = new google.maps.Marker({
position: myLatlngBienate,
map: mapBienate,
title: 'Bienate (fraz. Magnago), Piazzale del Tricolore'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
div {
height: 200px;
width: 200px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&.js"></script>
<div id="map-Busto"></div>
<div id="map-Magnago"></div>
<div id="map-Bienate"></div>

Pass MSSQL table values to javascript

I'm trying to make a website with asp.net mvc 4 & EF6 where I want to pass values from MSSQL table to javascript. So far everything is working fine except if I pass Latitude & Longitude values for google-map-api function, map doesn't show up in my view. I used Html.HiddenFor helper to pass the value from <span>. Here are my codes,
Controller
public ActionResult BranchDetails(int BrId)
{
Branch branchDetails = abdb.Branches.Find(BrId);
return View(branchDetails);
}
View
<script>
function initialize() {
var marker;
var LatTag = document.getElementById("Lat");
var Lat = LatTag.getElementsByTagName("span");
var LngTag = document.getElementById("Lng");
var Lng = LngTag.getElementsByTagName("span");
var mapProp = {
center: new google.maps.LatLng(LatTag, LngTag),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div class="container well" style="min-width: 100%; padding-right: 5px;">
<div id="googleMap"></div>
<span id="Lat">#Html.HiddenFor(model => model.Latitude)</span>
<span id="Lng">#Html.HiddenFor(model => model.Longitude)</span>
<h4><b>#Html.DisplayFor(model => model.Title)</b></h4>
<p><strong>Address:</strong> #Html.DisplayFor(model => model.Address)</p>
<p><strong>Contact No. :</strong> #Html.DisplayFor(model => model.ContactNo)</p>
<p><strong>Contact Person(s):</strong> #Html.DisplayFor(model => model.ContactPerson)</p>
</div>
</body>
Point to be noted that my Longitude & Latitude fields in MSSQL are set in varchar mode. I'm not sure if its causing the problem but just felt needed to inform. How can I solve this problem? Need this help badly. Tnx.
Nevermind, found my own solution. This worked for me, instead of giving span id, I gave Html.HiddenFor helper the id. For some reason javascript was not picking the id of the span I guess. Here are my codes,
<script>
function initialize() {
var marker;
var Lat = parseFloat(document.getElementById("Lat").value);
var Lng = parseFloat(document.getElementById("Lng").value);
var mapProp = {
center: new google.maps.LatLng(Lat, Lng),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="googleMap"></div>
#Html.HiddenFor(model => model.Latitude, new { id = "Lat" })
#Html.HiddenFor(model => model.Longitude, new { id = "Lng" })
</body>

Categories