Kennelbloke
Technical User
Hi folks because of changes at Google Maps API I'm making some changes to a maps page I have. The data creates the array from MySQL using PHP. Cutting out of the un-neccessary stuff I end up with this.
The code below shows the map but it doesn't show the markers. Getting no errors so I can't work out why. Does anyone have any ideas please.
The 'rfap1' etc is refering to a CSS style. When I view the page source the array returns i.e. rfas[0] aren't being converted (read).
The code below shows the map but it doesn't show the markers. Getting no errors so I can't work out why. Does anyone have any ideas please.
The 'rfap1' etc is refering to a CSS style. When I view the page source the array returns i.e. rfas[0] aren't being converted (read).
Code:
<script type="text/javascript" src="[URL unfurl="true"]https://maps.googleapis.com/maps/api/js?callback=Function.prototype&key=MYKEY&loading=async"></script>[/URL]
<script type="text/javascript">
async function initmap() {
// setTimeout second value is milliseconds
// ie: 1000 = 1 second, 30000 = 30 seconds
setTimeout( "document.location = document.location;", 30000);
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const myLatLng = new google.maps.LatLng(-41.439068, 147.135773);
const bounds = new google.maps.LatLngBounds();
const myOptions = {
zoom: 12,
maxZoom: 18,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapId: 'rfamaps123456'
};
map = new google.maps.Map(document.getElementById("show_map"), myOptions);
var rfastodo = [
['4',-41.416744,147.134476,'rfap3',2],
['3082',-41.432907,147.152039,'rfap3',3],
['3079',-41.431507,147.147400,'rfap2',4]
];
setRFAs(map, rfastodo);
function setRFAs(map, rfalist){
const rfaTag = document.createElement("div");
for (var i = 0; i < rfalist.length; i++) {
var rfas = rfalist[i];
var myLatLng2 = new google.maps.LatLng(rfas[1], rfas[2]);
rfaTag.classname = rfas[3];
rfaTag.textcontent = rfas[0];
var marker = new AdvancedMarkerElement({
position: myLatLng2,
map: map,
content: rfaTag,
zIndex: rfas[4]
});
}
bounds.extend(marker.position);
map.fitBounds(bounds);
}
}
</script>
</head />
<body style="margin:0px; padding:0px;" onload="initmap()" />
<div id="show_map" style="width:100%; height:90%;"></div>
</body>
</html>