I have the following piece of code;
<script type="text/javascript">
var icon = new google.maps.MarkerImage("img/pin_yellow.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
var style= [{"stylers":[{"visibility":"on"},{"saturation":-100},{"gamma":0.54}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"color":"#4d4946"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"gamma":0.48}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"gamma":7.18}]}];
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(0, 0),
zoom: 9,
maxZoom: 16,
minZoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true, // enable scale control
panControl: false,
mapTypeControl: false,
streetViewControl: false,
style: google.maps.ZoomControlStyle.SMALL, //zoom control size
styles: style,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
<?php
$sql = "SELECT * FROM tbBaptism, tbLocation, tbChurch WHERE tbBaptism.idLocation=tbLocation.idLocation AND tbBaptism.idChurch=tbChurch.idChurch";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc())
{
$location = $row['location'];
$lat = $row['clat'];
$lng = $row['clng'];
$fname = $row['baptismForename'];
$sname = $row['baptismSurname'];
$dp_date = $row['baptismDate'];
$date = new DateTime($dp_date);
$churchName = $row['churchName'];
$combine = $fname . " " . $sname . ",<br>Baptised @ " . $churchName . "<br>" . $date->format('l jS F, Y');
echo("addMarker($lat, $lng, '<b>$location</b><br />$combine');\n");
}
} else {
echo "No results to display or an error has occured";
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
Most of the PHP section you can ignore, but this code pulls some coordinates from a Mysql database and the line;
echo("addMarker($lat, $lng, '<b>$location</b><br />$combine');\n");
calls the "addMarker" function, feeding it lat, lng and a text string.
All this code works absolutely great creating the markers ... the problem I have is due to the nature of the data, a lot of markers I am creating have latitudes & longitudes that are identical due to the fact they are Church locations pulled from a database (used to mark locations of multiple graves) and so the markers appear stacked one on top of the other (so four or five markers appear as one with the same lat/lng).
What I want to do is cluster or stagger the markers with the exact same lng/lat so they are all viewable/clickable ... can anyone help me fix my code to do this or am I a lost cause?? (javascript isn't my strong point!)
