i'm trying to generate Google Maps Markers from image atributes from an array.
with the former version of the maps Api it worked fine. i now tried to make it work with the new version (AdvancedMarkerView)
console says Uncaught ReferenceError: AdvancedMarkerView is not defined / Uncaught (in promise) TypeError: AdvancedMarkerView is not a constructor
any help is greatly appreciated
"use strict";
var active_img = 0;
var stage_img;
var img_lat;
var img_lng;
var parsedLat;
var parsedLng;
var autoplayInterval;
var isautoplay = true;
var firstautoplay = 0;
var autoplaylock = 0;
var mouse_onplay = false;
var map_active = false;
var main_visible = false;
var main_v_lock = false;
var myLatLng = {
lat: 0,
lng: 0
};
const images = [{
path: 'img/img_3.webp',
img_lat: '41,47873',
img_lng: '11,99995',
},
{
path: 'img/img_2.webp',
img_lat: '49,47873',
img_lng: '10,99995',
},
];
let map;
async function initMap() {
var position = myLatLng;
const {
Map
} = await google.maps.importLibrary("maps");
const {
AdvancedMarkerView
} = await google.maps.importLibrary("marker");
map = new Map(document.getElementById("map"), {
mapId: "559497c6e95d32fc",
zoom: 18,
center: myLatLng,
fullscreenControl: false,
zoomControl: true,
streetViewControl: false
});
createMarkers(images, map, AdvancedMarkerView);
}
function createMarkers(images, map, AdvancedMarkerView) {
const markers = [];
images.forEach((image, index) => {
const {
img_lat,
img_lng,
path
} = image;
if (img_lat !== '0' && img_lng !== '0') {
const latLng = {
lat: parseFloat(img_lat.replace(',', '.')),
lng: parseFloat(img_lng.replace(',', '.'))
};
const marker = new AdvancedMarkerView({
position: latLng,
map: map,
title: path
});
marker.addListener('click', () => {
handleMarkerClick(index);
});
markers.push(marker);
}
});
return markers;
}
initMap();
function ifLost() {
if (img_lat === '0' && img_lng === '0') {
img_lng = 'data lost';
img_lat = '';
}
}
function img_update() {
document.getElementById('stage_img').src = stage_img;
ifLost();
document.getElementById('lat').innerHTML = `<div>${img_lat}</div>`;
document.getElementById('lng').innerHTML = `<div>${img_lng}</div>`;
}
$(document).ready(function() {
stage_img = images[0].path;
img_lat = images[0].img_lat;
img_lng = images[0].img_lng;
parsedLat = parseFloat(img_lat.replace(',', '.'));
parsedLng = parseFloat(img_lng.replace(',', '.'));
myLatLng = {
lat: parsedLat,
lng: parsedLng
};
if (map) {
map.setCenter(new google.maps.LatLng(parsedLat, parsedLng));
}
function coordinates_update_move() {
img_lat = images[active_img].img_lat;
img_lng = images[active_img].img_lng;
parsedLat = parseFloat(img_lat.replace(',', '.'));
parsedLng = parseFloat(img_lng.replace(',', '.'));
if (map) {
if (img_lat == '0') {} else {
map.panTo(new google.maps.LatLng(parsedLat, parsedLng));
}
}
ifLost();
}
function handleMarkerClick(index) {
active_img = index;
stage_img = images[active_img].path;
img_lat = images[active_img].img_lat;
img_lng = images[active_img].img_lng;
img_update();
coordinates_update_move();
setTimeout(close_btn2, 440);
}
});body {
position: relative;
width: 100vw;
height: 100vh;
}
#map_stage {
width: 100%;
height: 100%;
}
#map {
height: 50%;
width: 90%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>drau3en</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script>
(g => {
var h, a, k, p = "The Google Maps JavaScript API",
c = "google",
l = "importLibrary",
q = "__ib__",
m = document,
b = window;
b = b[c] || (b[c] = {});
var d = b.maps || (b.maps = {}),
r = new Set,
e = new URLSearchParams,
u = () => h || (h = new Promise(async(f, n) => {
await (a = m.createElement("script"));
e.set("libraries", [...r] + "");
for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
e.set("callback", c + ".maps." + q);
a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
d[q] = f;
a.onerror = () => h = n(Error(p + " could not load."));
a.nonce = m.querySelector("script[nonce]") ? .nonce || "";
m.head.append(a)
}));
d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))
})({
key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk",
v: "weekly",
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<div id="map_stage">
<div id="map"></div>
<p id="lat"></p>
<p id="lng"></p>
</div>
<footer>
</footer>
<script>
</script>
</body>
</html>
As has been noted, you need to use
AdvancedMarkerElementrather thanAdvancedMarkerView. With that changed you should find it fairly straightforward to add your own custom designed markers to the map at whatever locations you wish using HTML for the marker content. Perhaps the following, modified code, might help.The
gmp-clickevent which is used below is currently available within thebetachannel but this does help simplify accessing content within the AdvancedMarkerElement - using the olderclickevent is still possible but the clickhandler code would need to be modified to accommodate the change.