Trying to manipulate markers on a Google map using data from an XML file is proving challenging. I aim to create and store the markers in an array.
markerArray[fzg] = marker;
However, when attempting to update the positions of these markers based on new data, I encounter an issue where my moveMarker function displays "markerArray is undefined."
I have been unable to pinpoint the exact source of the problem within the code snippet provided:
<!DOCTYPE html >
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<link href="swu.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function initialize() {
//map
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(48.393866111111, 9.9770183333333),
zoom: 16,
mapTypeId: 'roadmap'
});
//traffic
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
markerArray = [];
function createMarkers () {
//for testing without XML file
// create for every i 1 marker
for (var i = 0; i < 1; i++) {
var pos = new google.maps.LatLng(
48.393866, 9.977018);
var marker = new google.maps.Marker({
map: map,
position: pos,
});
marker.setMap( map );
//store marker in the array with index i
markerArray[i] = marker;
} // end for
moveMarker(map, markerArray);
} // end createMarkers()
function moveMarker(map, markerArray) {
for (var i = 0; i < 1; i++) {
//move marker with index i on the map
//console says following markerArray is undefined
markerArray[i].setPosition(new google.maps.LatLng(48.393860, 9.9770199));
}
}
initialize();
createMarkers();
setTimeout(moveMarker(), 2500);
</script>
</body>
</html>
Here's the CSS file used for styling:
html, body {
height: 100%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#map {
width: 100%;
height: 100%;
}