javascript - Google Maps API Circle Icons -
i trying make map using google maps api , red dot icons (aka earthquake icons).
i have several locations , several magnitudes, since of magnitudes lower therefore not visible red dot icons apply locations.
var marker1; var marker2 (var = 0; < locations.length; i++) { if (locations[i][3] > 5){ alert("i in");} marker1 = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map, icon: getcircle(locations[i][3]) }); if(locations[i][3] < 5){ marker2 = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map, animation: google.maps.animation.bounce }); } google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker1); } })(marker1, i)); }
the problem resides on marker1. because if try limit marker locations magnitude higher 5 not design single icon , alert not trigger.
but if remove code of marker1 within "if" statement (like example), alert triggered , icons appear on map.
marker 2 can filtered no problems.
why working way? move "}" few lines below. cannot understand.
thanks help!
that code complicated, , way uses 2 global marker1
, marker2
variables, can't possibly want do.
i'm not entirely clear do want code do, can show cleaner way code may step in right direction?
for( var = 0; < locations.length; i++ ) { addmarker( locations[i] ); } function addmarker( location ) { var lat = location[1], lng = location[2], magnitude = location[3], content = location[0]; var options = { position: new google.maps.latlng( lat, lng ), map: map }; if( magnitude > 5 ) { options.icon = getcircle( magnitude ); } else { options.animation = google.maps.animation.bounce; } var marker = new google.maps.marker( options ); google.maps.event.addlistener( marker, 'click', function() { infowindow.setcontent( content ); infowindow.open( map, marker ); }); }
differences worth noting:
- no global
marker1
,marker2
variables. instead, every marker has ownmarker
variable. - a simple call
addmarker()
method creates closure need, instead of complicated function-returning-a-function. - use of named variables
locations[i][n]
properties make more readable. - handles case magnitude 5, original code skips. (change test
> 5
>= 5
if needed.) - combined 2
google.maps.marker()
calls avoid bit of repetition.
hopefully make easier figure out going on , need do.
Comments
Post a Comment