CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
M1nga
M1nga

Reputation: 53

Google Maps API Circle Icons

I am trying to make a map using Google Maps API and the red dot icons (aka earthquake icons).

I have several locations and several magnitudes, since some of magnitudes are lower therefore it will not be very visible so the red dot icons only will apply to some locations.

var marker1;
var marker2
for (var i = 0; i < locations.length; i++) {

    if (locations[i][3] > 5){
        alert("I am 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 i try to limit the marker to locations where magnitude is higher than 5 it will not design a single icon and the alert will not even be trigger.

BUT if I remove the code of the marker1 from within the "if" statement (like the example), the alert is triggered and the icons appear on the map.

Marker 2 can be filtered with no problems.

Why is this working this way? I just simply move the "}" a few lines below. I cannot understand.

Thanks for the help!

Upvotes: 1

Views: 1437

Answers (1)

Michael Geary
Michael Geary

Reputation: 28880

That code is very complicated, and the way it uses the two global marker1 and marker2 variables, it can't possibly do anything that you want it to do.

I'm not entirely clear what it is you do want the code to do, but can I show you a much cleaner way to code it that may be a step in the right direction?

for( var i = 0;  i < 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 and marker2 variables. Instead, every marker has its very own marker variable.
  • A simple call to the addMarker() method creates the closure you need, instead of the complicated function-returning-a-function.
  • Use of named variables for all those locations[i][n] properties to make it more readable.
  • Handles the case where magnitude is exactly 5, which the original code skips. (Change the test from > 5 to >= 5 if needed.)
  • Combined the two google.maps.Marker() calls to avoid a bit of repetition.

Hopefully that will make it easier to figure out what is going on and what you need to do.

Upvotes: 1

Related Questions