Neuer Marker in Google Maps bei mouseover

YndiaPaleAle

Newbie
Registriert
Apr. 2023
Beiträge
1
Hallo
Als hobby-programmierer konnte ich einen Codeschnippsel herunterladen und zum laufen bringen. Ich mache eine Abfrage aus einer mysql Tabelle und erstelle die Markers.
Ich möchte, dass das Icon bei mouseover wechselt. Das Standard-Icon ist Icon-Color.png. Bei Mouseover sollte das Icon-SW.png angezeigt werden (im gleichen Verzeichnis).
Kann mir jemand bitte einen Tipp geben, wie ich den Code anpassen müsste ?

<?php
$locations=array();
$ResultSET = MyQuery();

foreach ($ResultSET AS $row):
$name = $row['Firma'];
$latitude =$row['Latitude'];
$longitude = $row['Longitude'];
$PLZ = $row['PLZ'];
$Ort = $row['Ort'];
$Strasse = $row['Strasse'];
$Webseite = $row['Webseite'];
$Bemerkungen = $row['Bemerkungen'];

$locations[]=array( 'name'=>$name, 'lat'=>floatval($latitude), 'lng'=>floatval($longitude), 'plz'=>$PLZ, 'strasse'=>$Strasse, 'ort'=>$Ort, 'webseite'=>$Webseite, 'bemerkungen'=>$Bemerkungen);
endforeach;
?>

<script type="text/javascript">
var map;
var Markers = {};
var infowindow;
var locations = [];
<?php for($i=0;$i<sizeof($locations);$i++){ $j=$i+1;?>
locations[<?php echo $i;?>] = [];
locations[<?php echo $i;?>][0] = 'Firma;
locations[<?php echo $i;?>][1] = '<?php echo $locations[$i]['name'];?>';
locations[<?php echo $i;?>][2] = <?php echo floatval($locations[$i]['lat']);?>;
locations[<?php echo $i;?>][3] = <?php echo floatval($locations[$i]['lng']);?>;
locations[<?php echo $i;?>][4] = 0;
locations[<?php echo $i;?>][5] = '<?php echo $locations[$i]['plz'];?>';
locations[<?php echo $i;?>][6] = '<?php echo $locations[$i]['strasse'];?>';
locations[<?php echo $i;?>][7] = '<?php echo $locations[$i]['ort'];?>';
locations[<?php echo $i;?>][8] = '<?php echo $locations[$i]['webseite'];?>';
locations[<?php echo $i;?>][9] = '<?php echo $locations[$i]['bemerkungen'];?>';

<?php } ?>

function initialize() {
var myLatlng = new google.maps.LatLng(46.889775824012496, 8.394246478703376);
var mapOptions = {
zoom: 10,
center: myLatlng
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

infowindow = new google.maps.InfoWindow();
for(i=0; i<locations.length; i++) {
var position = new google.maps.LatLng(locations[2], locations[3]);
var marker = new google.maps.Marker({
position: position,
map: map,
title: locations[1],
icon: 'Icon-Color.png',
//icon: locations[5],
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[1]) ;
infowindow.setOptions({maxWidth: 400});
infowindow.open(map, marker);
}
}) (marker, i));
marker.setTitle(locations[1])
}
}
function initMap() {

google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>

<div id="map-canvas" style="height: 100%; width: 100%;"></div>
 
Zurück
Oben