We have a v3 map showing a series or markers, however today (16/08/12) Chrome and Safari has stopped rendering all but one, and the zoom functions are now defunct. In IE and FF all is fine.
function placeMarker(location)
{
// first remove all markers if there are any
deleteOverlays();
var marker_icon = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=info%7CFFFF00",
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(6, 20));
var marker = new google.maps.Marker({
position: location,
icon: marker_icon,
map: map,
draggable: true
});
// add marker in markers array
markersArray.push(marker);
$('#lat').val(location.lat().toFixed(6));
$('#lon').val(location.lng().toFixed(6));
}
// Deletes all markers in the array by removing references to them
function deleteOverlays()
{
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
You can see the output here: http://bit.ly/NqdSfq
View the source to see the full API file contents.
Here is the last part of the included js immediately after the markers are defined:
function getMarkerImage(iconColor)
{
return icons[iconColor];
}
var iconShadow = new google.maps.MarkerImage('',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(20, 34),
new google.maps.Point(0,0),
new google.maps.Point(6, 20));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [4,0,0,4,0,7,3,11,4,19,7,19,8,11,11,7,11,4,7,0],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(250,50)
});
function createMarker(map, latlng, label, html, color, zindex) {
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: getMarkerImage(color),
optimized: false,
//shape: iconShape,
title: label,
zIndex: zindex
});
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent(contentString);
infowindow.open(map,marker);
window.location.hash = map.getZoom() + '_' + e.latLng.lat() + '_' + e.latLng.lng();
});
}
function setMarkers(map, incidentsdata) {
// Add markers to the map
for (var i = 0; i < incidentsdata.length; i++) {
var incident = incidentsdata[i];
var myLatLng = new google.maps.LatLng(incident[2], incident[3]);
var marker = createMarker(map,myLatLng,incident[0],incident[1],incident[4],incident[5]);
}
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
<?php
$used_coordinates = array(); // do not add the same coordinates more than once
$incidents_js = array();
foreach ($incidents as $i):
$more_link = '<a href="'.site_url('client/home/view/'.$i->id).'">More about this incident</a>';
// add source text
$source_text = "{$i->source}";
switch($i->source):
case 'A';
$source_text .= ': Verified';
break;
case 'B';
$source_text .= ': Unverified';
break;
endswitch;
// add location text
$location_text = '';
if($i->province_id > 0 AND !empty($i->province_name)):
$location_text = "<tr><th><strong>Location:</strong></th><td>{$i->province_name}<td></tr>";
endif;
$incident_time = ($i->time) ? $i->time : ucwords($i->time_of_day);
$window_text = '<div id="view-incident">
<table>
<tr><th><strong>Accuracy Descriptor:</strong></th><td>'.(($i->accuracy) ? $i->accuracy : 'Unknown').'<td></tr>
<tr><th><strong>Date:</strong></th><td>'.date("d/m/Y", strtotime($i->date)).'<td></tr>
<tr style="color:red;"><th><strong>Time:</strong></th><td>'.$incident_time.'<td></tr>'.$location_text.'
<tr><th><strong>Source:</strong></th><td>'.$source_text.'<td></tr>
<tr><th><strong>Military Grid Reference:<strong></th><td>'.lat_lon_to_mgrs($i->latitude, $i->longitude).'<td></tr>
<tr><th><strong>Latitude:</strong></th><td>'.$i->latitude.'<td></tr>
<tr><th><strong>Longitude:</strong></th><td>'.$i->longitude.'<td></tr>
<tr><th><strong>Country:</strong></th><td>'.$i->country_name.'<td></tr>
<tr><th><strong>Type: </strong></th><td>'.$i->type_name.'</td></tr>
<tr><th><strong>Impact</strong></th><td>'.$i->impact_name.'</td></tr>
<tr><th><strong>People Involved:</strong></th><td>'.$i->peopleqty_name.'<td></tr>
</table>
</div>'.$more_link;
$window_text = str_replace("\n", '', $window_text);
$incident_mgrs = lat_lon_to_mgrs($i->latitude, $i->longitude);
// set the marker image to a colour with the letter or custom icon
switch($i->type_balloon_colour):
case 'police';
case 'threat';
$incident_image = "{$i->type_balloon_colour}";
break;
default:
$incident_image = "{$i->type_balloon_colour}{$i->source}";
break;
endswitch;
// if less than 24 hours old and is tier A or B use blinking icon
if(($i->source == 'A' OR $i->source == 'B') AND strtotime($i->date) >= strtotime('-24 hours')):
$incident_image .= 'blink';
elseif(($i->source == 'A' OR $i->source == 'B') AND $i->type_id == 6 AND strtotime($i->date) >= strtotime('-48 hours')):
$incident_image .= 'blink';
endif;
switch($i->source):
case 'A';
$zindex = 1004;
break;
case 'B';
$zindex = 1003;
break;
case 'C';
$zindex = 1002;
break;
case 'D';
$zindex = 1001;
break;
endswitch;
if(!empty($incident_mgrs) AND !empty($i->latitude) AND !empty($i->longitude) AND $i->latitude != '.' AND $i->longitude != '.'):
if(!in_array($i->latitude . "," . $i->longitude, $used_coordinates)):
$used_coordinates[] = $i->latitude . "," . $i->longitude;
$incidents_js[] = "['', '".$window_text."', ".$i->latitude.", ".$i->longitude.", '$incident_image', $zindex]";
endif;
endif;
endforeach;
?>
var incidentslist = [<?=implode(",", $incidents_js)?>];
<?php endif;?>
</script>
Many thanks in advance!
You are specifying a really old version of the API on your page (3.3):
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.3">
</script>
v3.3 has been retired for a long time. I believe a new version is in the process of being released, making the version you get move from 3.7 to 3.8.
Sounds like you might have an issue with CANVAS markers, a work around would be setting optimized to false in the marker properties.