Hi everybody,
I have some problems with the display of markers on a map. I know that
Google Maps limits the number of markers on a map (about 200 markers I
think).
The map is not displayed when I try to put more than 62 markers.
Here is my code (I'm working with ruby on rails) :
In rails :
def all_populations_google_map3
@populations = Population.all(:limit => 63)
pop_list = @populations.to_json
if @populations.size > 0
@map = true
@map_to_html = init_map3(@populations)
@map_to_html << "function createMarker(map, latlng, html){\n\t"
@map_to_html << "var contentString = html;\n\t"
@map_to_html << "var marker = new google.maps.Marker({map: map,
position: latlng});\n\t"
@map_to_html << "google.maps.event.addListener(marker, 'click',
function(){\n\t\t"
@map_to_html << "infowindow.setContent(contentString);\n\t\t"
@map_to_html << "infowindow.open(map, marker);\n\t});\n}\n"
@map_to_html << "var list_markers = eval(\"(\" + '#{pop_list}' +
\")\");\n"
@map_to_html << "function setMarkers(map, list_markers){\n\t"
@map_to_html << "for (var i = 0 ; i < list_markers.length ; i++)
{\n\t\t"
@map_to_html << "var mark = list_markers[i].population;\n\t\t"
@map_to_html << "var myLatLng = new
google.maps.LatLng(mark.gps_coordinate.x,mark.gps_coordinate.y);\n\t
\t"
@map_to_html << "var html = '<div>Population : ' + mark.name +
'</div>';\n\t\t"
@map_to_html << "var marker = createMarker(map,myLatLng, html);\n
\t}\n}\n"
@map_to_html << "window.onload = initMap();"
end
end
In the browser :
<!DOCTYPE html>
<html>
<head>
<title>GD2</title>
<link href="/stylesheets/style.css?1280145671" media="all"
rel="stylesheet" type="text/css" />
<script src="/javascripts/prototype.js?1280145671" type="text/
javascript"></script>
<script src="/javascripts/effects.js?1280145671" type="text/
javascript"></script>
<script src="/javascripts/dragdrop.js?1280145671" type="text/
javascript"></script>
<script src="/javascripts/controls.js?1280145671" type="text/
javascript"></script>
<script src="/javascripts/application.js?1280321482" type="text/
javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<script type ="text/javascript">
function initMap(){
var latlng = new google.maps.LatLng( 35.03 , -5.0);
var myOptions = {
zoom : 4,
center : latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new
google.maps.Map(document.getElementById("map"),myOptions);
google.maps.event.addListener(map, 'click', function()
{infowindow.close();});
setMarkers(map,list_markers);
}
function createMarker(map, latlng, html){
var contentString = html;
var marker = new google.maps.Marker({map: map, position: latlng});
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
var list_markers = eval("(" + '[{"population": {"name": "El Anasser",
"host_plant": null, "created_at": "2009-05-04T15:06:28Z",
"collect_method": null, "updated_at": "2009-05-04T15:06:28Z",
"espece_id": 8, "collect_date": null, "provenance_code": null,
"gps_coordinate": {"with_m": false, "m": 0.0, "x": 35.03, "with_z":
false, "y": -5.0, "srid": 4326, "z": 0.0}, "altitude": 1260, "id": 2,
"user_id": null, "stand_id": 2, "origin": null, "laboratory_id": null,
"collector_name": null}},, ....
{"population": {"name": "Frazzano'", "host_plant": null,
"created_at": "2009-05-04T15:06:37Z", "collect_method": null,
"updated_at": "2009-05-04T15:06:37Z", "espece_id": 3, "collect_date":
null, "provenance_code": null, "gps_coordinate": {"with_m": false,
"m": 0.0, "x": 38.05, "with_z": false, "y": 14.73, "srid": 4326, "z":
0.0}, "altitude": 563, "id": 64, "user_id": null, "stand_id": 64,
"origin": "autochthonous", "laboratory_id": null, "collector_name":
null}}]' + ")");
function setMarkers(map, list_markers){
for (var i = 0 ; i < list_markers.length ; i++){
var mark = list_markers[i].population;
var myLatLng = new
google.maps.LatLng(mark.gps_coordinate.x,mark.gps_coordinate.y);
var html = '<div>Population : ' + mark.name + '</div>';
var marker = createMarker(map,myLatLng, html);
}
}
window.onload = initMap();
</script>
<script src="/javascripts/clusterer.js?1280145671" type="text/
javascript"></script>
</head>
If someone can help.
Thank's a lot :-)
Audrey
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
