I have a map with dynamically generated markers using gmaps.js.
And it works.
But I would like to select a marker by coordinates and click on it.
I know how to run it, but I canβt figure out how to select the marker correctly in jQuery or find it in the map.markers array?
This is my code:
$(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 the link and enlarge + show the info window by opening it or by clicking on the marker
source
share