Я получаю эту ошибку при попытке загрузить страницу HTML с моей картой:
Uncaught ReferenceError: Google не определен
Я думал, что этопорядок, в котором я загружал API карт Google, но он у меня есть в начале.
Мой HTML выглядит следующим образом:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJT$
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"
async defer></script>
<script src="mapCode.js"></script>
<title>Adventure Map</title>
</head>
<body>
<select id="type" onchange="filterMarkers(this.value);">
<option value="">All Markers</option>
<option value="backpacking">Backpacking</option>
<option value="hiking">Hiking</option>
<option value="offRoad">Off Road</option>
</select>
<div id="map-canvas" style="width: 100%; height: 600px"></div>
</body>
Файл mapCode.js, который вызывает мой html-код, выглядит следующим образом.У меня что-то не в том порядке, не загружается ли API Google вовремя перед загрузкой карты?:
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
var markerCluster;
// Our markers
markers1 = [
['0', 'Tanner Trail Grand Canyon', 36.0326, -111.8525, 'backpacking'],
['1', 'Yosemite Snow Shoe Badger Pass', 37.6648, -119.6634, 'backpacking'],
['2', 'Kayak Camping Catalina Island', 33.3504, -118.3282, 'backpacking'],
['3', 'Mini Trans Catalina Trail', 33.3403, -118.3262, 'backpacking']
];
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
var mapOptions = {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
markerCluster = new MarkerClusterer(map, gmarkers1, {
imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m'
});
}
/**
* Function to add marker 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
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(15);
}
})(marker1, content));
}
/**
* Function to filter markers by category
*/
filterMarkers = function(category) {
var newmarkers = [];
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);
newmarkers.push(marker);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
markerCluster.clearMarkers();
markerCluster.addMarkers(newmarkers);
}
google.maps.event.addDomListener(window, "load", initialize);