I have a website where i list conferences. They are shown on a google map. I had two pages working well, one with all the conferences of the week (multiple makers) and another with only 1 conference. While i did not change the code, the one with multiple markers stopped working.
Here is the page that is not working anymore; www.biomeeter.com/index6fixed.php And this is the working page with only 1 marker; http://www.biomeeter.com/biologymeetingsdatabase.php?meeting_id=1060
This is the code for the multiple-positions. Somehow if i limit (not in the code below) the php results to only 1, the map works. So somehow there seems to be a problem in separation or something like that between markers... I can't figure out how to fix this, if there are any suggestions that would be awesome!
<div id="map" style="width: 550px; height: 370px;"></div>
<script type="text/javascript">
var locations = [
<?php
$result = mysql_query("SELECT * FROM meetings WHERE YEARWEEK(start_date) = YEARWEEK(CURRENT_DATE) OR YEARWEEK(end_date) = YEARWEEK(CURRENT_DATE)");
while($row = mysql_fetch_array($result))
{
$lat = $row['langitude'];
$long = $row['longitude'];
$name = $row['meeting_name'];
$namewithoutbackspaces = str_replace("'", "", "$name");
$meeting_id = $row['meeting_ID'];
$city = $row['city'];
$country = $row['country'];
$website= $row['website'];
echo "['$namewithoutbackspaces </br> $city,$country </br> <a href=\"biologymeetingsdatabase.php?meeting_id=$row[meeting_ID]\" target=\"_blank\" >more info</a></u>', $lat, $long, 1],";
}
?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(38.41885, 9.12166),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bioImage = new google.maps.MarkerImage('gif files/index/marker.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(21, 43),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(20, 32));
var pinColor = "FA2222";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 43),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: bioImage
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}