CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
tomekfranek
tomekfranek

Reputation: 7099

How to select marker by coordinates or title?

I have map with dynamically generated markers using gmaps.js And it works.

But I would like to select marker by coordinates and trigger click on it.

I know how to trigger it but I can't figure out how to proper select marker in jQuery or find it in map.markers array?

This is my code:

# = require lib/gmaps
$(document).on 'ready', ->

  if $('#map').length > 0
    map = new GMaps(
      div: "#map"
      lat: 53.5500000
      lng: 10.0000000
      zoom: 12
    )

    url = "nearby_cardiologists.json" + window.location.search
    $.getJSON url, (data) ->
      if data and data.length > 0
        firstMarker = data[0]
        map.setCenter firstMarker.latitude, firstMarker.longitude

        $.each data, (index, cardiologist) ->
          cardiologist_info = '<p>' + '<b>' + cardiologist.title + ' ' + cardiologist.first_name + ' ' + cardiologist.last_name + '</b><br>' + cardiologist.street + ', ' + cardiologist.city
          infowindow = new google.maps.InfoWindow(content: cardiologist_info)
          marker = map.addMarker
            lat: cardiologist.latitude
            lng: cardiologist.longitude
          google.maps.event.addListener marker, "click", ->
            infowindow.open map, this

        $("#nearby_cardiologists").on 'click', 'a', (event) ->
          event.preventDefault()
          cardiologist = $(this)
          i = cardiologist.data('id')
          marker = map.markers[0]
          map.setCenter cardiologist.data('coordinates').latitude, cardiologist.data('coordinates').longitude
          map.setZoom 16

      else
        $('#map').hide()

My goal is to click on link and zoom + show info window by opening it or triggering click on marker

Upvotes: 3

Views: 2252

Answers (1)

ChrisSwires
ChrisSwires

Reputation: 2723

I think this answer should help you with this case: https://stackoverflow.com/a/14524925/1856970

You need to be able to tie the marker to the a link in some way (this example uses an id attribute appended to both to determine the correct marker click event to trigger), in order to be able to find it at runtime. It is not possible to slect the marker solely by it's long/lat coords.

An alternative method would be to create the a link click events within the foreach loop in which you instantiate markers. This simplifies things by allowing you to have each marker in scope as you progress and eliminates the need for you to select the markers at a later execution point.

Once you have the appropriate marker, getting the long lat is trivial and can be done using getPosition (presumably to center the map etc).

Upvotes: 1

Related Questions