CODEWITHSUNDEEP
javascriptgoogle-mapscoffeescript
Ryan Brubaker
Ryan Brubaker

Reputation: 177

Google Maps bug? Displayed marker changes depending on zoom level

I am displaying a Google Map with a fixed set of markers that I have stored in an array. The particular markers that are displayed are dependent on a date selected by the user. After the date is selected, I display the appropriate markers and also update each marker's info window for an event being held at the location.

The issue I'm running into is the following. There are two markers relatively close together, call them M1 and M2. I select a date where M2 should be shown and everything works as expected. The correct marker is shown and the correct information is shown in the info window. I then select a date where M1 should be shown.

Stepping through the code indicates the appropriate marker (M1) is shown. However, the info window still shows M2's information from the previous time it was displayed.

The odd thing is, if I zoom in to focus on the area where the marker lies, then click on the marker to show the info window, the appropriate information for M1 is displayed. If I zoom back out, the information for M2 is displayed.

If I repeat the initial steps above with the map already zoomed in, the info windows always display the appropriate information.

There are no handlers registered with a zoom event and all markers are initialized with the optimized property set to false.

I'm at a loss as to why this is happening. Any ideas?

class ottb.Map
  constructor: () ->   

    @map = new google.maps.Map(document.getElementById("schedule-map"), gMapOptions)
    @gameMarkers = {}
    @displayedGames = {}
    @lastInfoWindow = null

  # Updates the map to show the games for the currently selected date.
  displayGames: (newGames) ->

    @lastInfoWindow.close() if @lastInfoWindow isnt null

    # Fade out currently displayed games if they are not in the new list of
    # games to display
    for own teamAbbr, displayedGame of @displayedGames
      hasIt = newGames.some( (newGame) -> newGame.home_team_abbr == displayedGame.home_team_abbr)
      if not hasIt
        @fadeOutMarker(@gameMarkers[displayedGame.home_team_abbr])
        delete @displayedGames[displayedGame.home_team_abbr]

    for newGame in newGames
      do (newGame) =>
        marker = @gameMarkers[newGame.home_team_abbr]
        if not marker?
          marker = new google.maps.Marker
            position: new google.maps.LatLng(parseFloat(newGame.lat), parseFloat(newGame.lon))
            map: @map
            opacity: 0
            opacities: []

        marker.setTitle(newGame.away_team_name + ' @ ' + newGame.home_team_name)

        hasIt = @displayedGames[newGame.home_team_abbr]?
        @fadeInMarker(marker, 0) if not hasIt

        source = $("#info-window").html()
        template = Handlebars.compile(source)
        context =
         game_id: newGame.id,
         away_team: newGame.away_team_abbr, 
         home_team: newGame.home_team_abbr, 
         game_time: newGame.game_time
         displaySelectGameLink: true

        google.maps.event.addListener(marker, 'click', =>
          @lastInfoWindow.close() if @lastInfoWindow isnt null
          @lastInfoWindow = new google.maps.InfoWindow()
          @lastInfoWindow.setContent(template(context))
          @lastInfoWindow.open(that.map, marker)
          return false)   

        @gameMarkers[newGame.home_team_abbr] = marker
        @displayedGames[newGame.home_team_abbr] = newGame

Upvotes: 0

Views: 348

Answers (1)

Ryan Brubaker
Ryan Brubaker

Reputation: 177

The light bulb in my head went off after my 3rd comment in the original post. I'm fading markers in/out of the map and never actually taking them off of the map. M2 has opacity 0, but its z-index must be above M1 so I'm still clicking on it. When I zoom in, they're far enough apart that they're no longer overlapping.

One of those days...(actually two). Excuse me while I go bang my head against the wall.

Upvotes: 1

Related Questions