Help needed! I've been struggling with this code for a while now. I can show multiple markers on the map but can't figure out how to display info details in a pop up box when they are clicked. Currently, I'm just trying to make it say "Hey!" as a test. Any suggestions would be greatly appreciated!
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer>
</script>
<script type="text/javascript">
var map;
var image = 'images/marker_blast.png';
function initialize() {
// Set static latitude, longitude value
var latlng = new google.maps.LatLng(40.4313684, -79.9805005);
// Set map options
var myOptions = {
zoom: 11,
center: latlng,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create map object with options
map = new google.maps.Map(document.getElementById("map"), myOptions);
//MARK MAP
<?php
$markers = $mysqli->query("SELECT * FROM reports");
while($row_marker = $markers->fetch_assoc()) {
// uncomment the 2 lines below to get real data from the db
// $result = mysql_query("SELECT * FROM parkings");
// while ($row = mysql_fetch_array($result))
echo "addMarker(new google.maps.LatLng(".$row_marker['lat'].", ".$row_marker['lng']."), map);\n";
}
?>
function addMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image,
size:30,
draggable: false, // enables drag & drop
animation: google.maps.Animation.DROP
});
}
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', (function(marker) {
return function() {
var content = "Hey";
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
</script>