javascriptgoogle-mapsgoogle-maps-api-3

API v3 markers not showing in Chrome


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!


Solution

  • 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.