Accessing Google Maps Markers in 2D-array from outside

Question

I'm building a webpage which display events on a map. The events, represented by markers on the Google Maps, are clickable so users can get additional info. So far, this is working fine.

Somewhere else on the webpage there is also a list of the same events. What I want is that users can click on something like "View on map" so the users are zoomed in on that particular event on the map, with the infoWindow open.

This topic is not new on StackOverflow, but the existing solutions I found seems not to work on my code (or I'm simply messing things up). I have to find a solution for working with the arrays but I don't see the solution...

The information for the markers and infoWindows are coming out of a database via PHP (injected into the code). The information goes into an 2D-array. I'm a beginner so the code will be a little bit of noobish.

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = { mapTypeId: 'roadmap'};

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

<?php
    // Some query
?>
// Generate array with markers
var markers = [
    <?php
    // Get stuff from database
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "['".$row['conname']."', ".$row["gps_long"].",".$row['gps_lat']."],\r\n";
        }
    }
    ?>
];

// Generate array for infoWindow
var infoWindowContent = [
    <?php
    // More stuff from database
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "['blablabla'],";
        }
    }
    ?>
];

var infoWindow = new google.maps.InfoWindow(), marker, i;

for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    google.maps.event.addListener(map, "click", function(event) {
        infoWindow.close();
    });                

    map.fitBounds(bounds);   
}

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(5);
    google.maps.event.removeListener(boundsListener);
}); 

}
google.maps.event.addDomListener(window, 'load', initialize)

The list is also generated via PHP on the same way on the same time. In a somewhere...

        <?php
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo '<p><a href=./?event="'.$row["id"].'">'.$row["eventname"]."</a><br>";   
            echo $row["date"]."<br>\n";
            echo '<a href="#">View on map</a></p><br>';
        }
    }
    ;?>

I hope you guys can help me out.

Answer 1

Instead of running 2 queries to populate the list and the markers-array create only the list, and store the attributes that will be needed for the marker-creation as attributes of the list-items.

In initialize iterate over the list-items and create the markers based on the attributes that have been assigned to the list-items....and also add desired click-listener(s) to the list-item.

benefits:

• only a single query
• no global variables needed

Of course it may also be done the opposite way: create the markers-array with additional properties for the list, and then populate the list in initialize.