谷歌街景视图因标记过多而被打破

I am creating a site for mobile phones and displaying a 1000+ markers from a database on Google Maps, however when I drag the street view icon to the map, mobile Safari and mobile Chrome both crash.

If I limit the markers to 10, it works fine.

I don't know what the issue is. Here is my code:

function initialize() { 
var myOptions = {
    zoom: 17,
    zoomControl:true,
    mapTypeControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
getLocation();

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {infoWindow.close();});

<?php
    for($i = 0; $i < count($places); $i++) {
        ?>
        var marker<?=$i?> = new google.maps.Marker({
        position: new google.maps.LatLng(<?=$places[$i]->coordinates?>),
        map: map,
        });

        google.maps.event.addListener(marker<?=$i?>, 'click', function() {
                    infoWindow.setContent("");
                    infoWindow.open(map,marker<?=$i?>);
            map.panTo(marker<?=$i?>.getPosition());
        });
    <?php
    }
?>

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError, { timeout: 3000, enableHighAccuracy: true, maximumAge: 90000 });
    }
    else {
        alert("Geolocation is not supported by this browser.");
    }
}
function showPosition(position) {
    var currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.setCenter(currentLocation);
    var marker = new google.maps.Marker({
        position: currentLocation,
        map: map
    });
}
function showError(error) {
    alert(error.message);
}   
}

Clustering your markers can be a solution. And then for example creating a json with php, and load it with javascript.

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

https://developers.google.com/maps/articles/toomanymarkers

This example will show 100 markers on map.

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

var markers = [];
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

hope it helps