Show all data of markers with same latitude and longitude into 1 info_window using php and mysql

Viewed 218

I want to show all the data of markers that have the same latitude and longitude INTO SINGLE INFO WINDOW using PHP and MySQL. I have codes here but the info window of the markers that have the same spot is not showing.

Here is my php code

<?php 
require_once "dbcon.php";
// Fetch the marker info from the database 
$result = $conn->query("SELECT * FROM locations"); 

// Fetch the info-window data from the database 
$result2 = $conn->query("SELECT * FROM locations WHERE (latitude, longitude) IN (
SELECT latitude, longitude FROM locations GROUP BY latitude, longitude HAVING count(*) > 1
)"); 
?>

here is the javascript

<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    mapTypeId: 'roadmap'
};
                
// Display a map on the web page
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(100);
    
// Multiple markers location, latitude, and longitude
var markers = [
    <?php if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){ 
            echo '["'.$row['name'].'", '.$row['latitude'].', '.$row['longitude'].', 
"'.$row['icon'].'"],'; 
        } 
    } 
    ?>
];
                    
// Info window content
var infoWindowContent = [
    <?php if($result2->num_rows > 0){ 
        while($row = $result2->fetch_assoc()){ ?>
            ['<div class="info_content">' +
            '<h3><?php echo $row['name']; ?></h3>' +
            '<p><?php echo $row['info']; ?></p>' + '</div>'],
    <?php } 
    } 
    ?>
];
    
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Place each marker on the map  
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,
        icon: markers[i][3],
        title: markers[i][0]
    });
    
    // Add info window to marker    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    // Center the map to fit all markers on the screen
    map.fitBounds(bounds);
}

// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(14);
    google.maps.event.removeListener(boundsListener);
});
}

// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
0 Answers
Related