I've difficulties to display a simple marker, indeed I have "Uncaught ReferenceError: google is not defined" in Chrome console and marker doesn't appear. I searched everywhere in the forum but nothing helped me. I really have looked at every article there is but this error always es up and no markers are added.
I provide you my little HTML code
<!DOCTYPE html>
<html lang="lv">
<head>
<title>SparkleHeart</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel='icon' href='assets/img//Intersect.svg' type='image/x-icon' />
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script
src=".15.2/js/all.js"
data-auto-a11y="true"></script>
<script src='.5.1/jquery.min.js'></script>
<script src='assets/js/theme.js'></script>
<script src=".11.0/jquery.typeahead.min.js" integrity="sha512-Rc24PGD2NTEGNYG/EMB+jcFpAltU9svgPcG/73l1/5M6is6gu3Vo1uVqyaNWf/sXfKyI0l240iwX9wpm6HE/Tg==" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div>
<!-- Drop-Down Filter Menu -->
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="Branch">Branch</option>
<option value="ATM">ATM</option>
<option value="Drive-Thru">Drive-Thru</option>
<!--Add more "options" for the dropdown menu-->
</select>
<div id="map-canvas"></div>
</div>
<script
src=";map_ids=e24b393c59b842b4&callback=initMap" async defer>
</script>
</main>
</body>
</html>I've difficulties to display a simple marker, indeed I have "Uncaught ReferenceError: google is not defined" in Chrome console and marker doesn't appear. I searched everywhere in the forum but nothing helped me. I really have looked at every article there is but this error always es up and no markers are added.
I provide you my little HTML code
<!DOCTYPE html>
<html lang="lv">
<head>
<title>SparkleHeart</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel='icon' href='assets/img//Intersect.svg' type='image/x-icon' />
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script
src="https://use.fontawesome./releases/v5.15.2/js/all.js"
data-auto-a11y="true"></script>
<script src='https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='assets/js/theme.js'></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js" integrity="sha512-Rc24PGD2NTEGNYG/EMB+jcFpAltU9svgPcG/73l1/5M6is6gu3Vo1uVqyaNWf/sXfKyI0l240iwX9wpm6HE/Tg==" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div>
<!-- Drop-Down Filter Menu -->
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="Branch">Branch</option>
<option value="ATM">ATM</option>
<option value="Drive-Thru">Drive-Thru</option>
<!--Add more "options" for the dropdown menu-->
</select>
<div id="map-canvas"></div>
</div>
<script
src="https://maps.googleapis./maps/api/js?key=AIzaSyBGwz_8OxIGhS_nOIPS2F_mH1ie5WfmhZ0&map_ids=e24b393c59b842b4&callback=initMap" async defer>
</script>
</main>
</body>
</html>
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Function to init map
function initMap() {
var center = new google.maps.LatLng(56.9496,24.1052);
var mapOptions = {
zoom: 14,
center: center,
mapId: 'e24b393c59b842b4',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
// Function to add markers to map
function addMarker(marker) {
var category = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map
});
gmarkers1.push(marker1);
// Marker click listener (zoom in and open info window)
google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
return function () {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
infowindow.open(map, marker1);
map.panTo(this.getPosition());
map.setZoom(13);
}
})(marker1, content));
}
// Function to filter markers by category
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// if Categories don't match
else {
marker.setVisible(false);
}
}
}
// Add markers (you can add as many as you like)
// Note, marker #5 has a lot of styling and an image in the info window. Just showing an example of what you can do with an info window.
markers1 = [
['0', 'Lee Blvd Branch', 56.9496, 24.1052, 'Branch'],
['1', 'Lee Blvd ATM', 34.613839, -98.409974, 'ATM'],
['2', 'Annex Branch', 34.607799, -98.396419, 'Branch'],
['3', 'West Branch', 34.623425, -98.468883, 'Drive-Thru'],
['4', 'East ATM', 34.593839, -98.409974, 'ATM'],
['5', '<div style=\"font-size:12px; color:#000; \"><img id=\'popimg\' src=\'https://s3-us-west-2.amazonaws./s.cdpn.io/44720/paris.jpg\' <br/><br/><strong>Address:</strong><br/>123 Happy Place<br/><br/><strong>City-State-Zip:</strong><br/>Lawton, OK. 73509<br/><br/><strong>Phone:</strong><br/>580-555-1234<br/><br/> <strong>Type:</strong><br/>(ATM)<br/><br/><strong>Monday - Friday</strong><br/>9:00 AM - 5:00 PM                    </div>"', 34.713839, -98.409974, 'ATM']
];
// Init map
initMap();- That doesnt work my friend, already tried :( – blqk Commented Feb 19, 2021 at 18:49
1 Answer
Reset to default 2The error google is not defined was thrown because you tried to use the google object before it is defined:
var infowindow = new google.maps.InfoWindow({
content: ''
});
And it is defined by the script call to https://maps.googleapis./maps/api/js which is loaded asynchronously. So as soon as it is loaded, the initMap() function runs because it was passed to the request: &callback=initMap You do not have to call initMap in your code.
I added two console.logs to show the initMap is running and that 5 markers are added. There is a weird Script error. message shown in the snippet below and I can't understand why... But it does not show in CodePen
#map-canvas{
height: 500px;
}<html lang="lv">
<head>
<title>SparkleHeart</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--link rel='icon' href='assets/img//Intersect.svg' type='image/x-icon' />
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<script--
src="https://use.fontawesome./releases/v5.15.2/js/all.js" data-auto-a11y="true"></script-->
<script src='https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<!--script src='assets/js/theme.js'></script-->
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js" integrity="sha512-Rc24PGD2NTEGNYG/EMB+jcFpAltU9svgPcG/73l1/5M6is6gu3Vo1uVqyaNWf/sXfKyI0l240iwX9wpm6HE/Tg==" crossorigin="anonymous"></script>
</head>
<body>
<main>
<div>
<!-- Drop-Down Filter Menu -->
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="Branch">Branch</option>
<option value="ATM">ATM</option>
<option value="Drive-Thru">Drive-Thru</option>
<!--Add more "options" for the dropdown menu-->
</select>
<div id="map-canvas"></div>
</div>
<script>
var gmarkers1 = [];
var markers1 = [];
//var infowindow; // = new google.maps.InfoWindow({
// content: ''
//});
// Function to init map
function initMap() {
console.log("init map")
infowindow = new google.maps.InfoWindow({content: ''});
var center = new google.maps.LatLng(56.9496, 24.1052);
var mapOptions = {
zoom: 14,
center: center,
mapId: "e24b393c59b842b4"
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
// Function to add markers to map
function addMarker(marker) {
console.log("Add marker",marker)
var category = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map
});
gmarkers1.push(marker1);
// Marker click listener (zoom in and open info window)
google.maps.event.addListener(
marker1,
"click",
(function(marker1, content) {
return function() {
console.log("Gmarker 1 gets pushed");
infowindow.setContent(content);
infowindow.open(map, marker1);
map.panTo(this.getPosition());
map.setZoom(13);
};
})(marker1, content)
);
}
// Function to filter markers by category
//filterMarkers = function (category) {
function filterMarkers(category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// if Categories don't match
else {
marker.setVisible(false);
}
}
}
// Add markers (you can add as many as you like)
// Note, marker #5 has a lot of styling and an image in the info window. Just showing an example of what you can do with an info window.
markers1 = [
["0", "Lee Blvd Branch", 56.9496, 24.1052, "Branch"],
["1", "Lee Blvd ATM", 34.613839, -98.409974, "ATM"],
["2", "Annex Branch", 34.607799, -98.396419, "Branch"],
["3", "West Branch", 34.623425, -98.468883, "Drive-Thru"],
["4", "East ATM", 34.593839, -98.409974, "ATM"],
[
"5",
"<div style=\"font-size:12px; color:#000; \"><img id='popimg' src='https://s3-us-west-2.amazonaws./s.cdpn.io/44720/paris.jpg' <br/><br/><strong>Address:</strong><br/>123 Happy Place<br/><br/><strong>City-State-Zip:</strong><br/>Lawton, OK. 73509<br/><br/><strong>Phone:</strong><br/>580-555-1234<br/><br/> <strong>Type:</strong><br/>(ATM)<br/><br/><strong>Monday - Friday</strong><br/>9:00 AM - 5:00 PM                    </div>\"",
34.713839,
-98.409974,
"ATM"
]
];
// Init map
//initMap();
</script>
<script src="https://maps.googleapis./maps/api/js?key=AIzaSyBGwz_8OxIGhS_nOIPS2F_mH1ie5WfmhZ0&map_ids=e24b393c59b842b4&callback=initMap" async defer>
</script>
</main>
</body>
</html>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745393322a4625764.html
评论列表（0条）