0

So I am really trying hard here but cannot make it work myself.

I created a gmap on my webapplication. It shows companies from my database on the map with red markers. Now I want to add an eventlistener to every marker so that whenever the user clicks a marker, only this company is shown in a list on the right of the map.

I used the gem geocoder. Here is the code in my view that creates the map:

<div
    id="map"
    style="width: 100%;
    height: 600px;"
    data-markers="<%= @markers.to_json %>"   
></div>

And here is my map file:

import GMaps from 'gmaps/gmaps.js';

const mapElement = document.getElementById('map');
if (mapElement) { // don't try to build a map if there's no div#map to 
inject in
  const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
  const markers = JSON.parse(mapElement.dataset.markers);
  map.addMarkers(markers);
  if (markers.length === 0) {
    map.setZoom(2);
  } else if (markers.length === 1) {
    map.setCenter(markers[0].lat, markers[0].lng);
    map.setZoom(14);
  } else {
    map.fitLatLngBounds(markers);
  }
  markers.clickable
}

import { autocomplete } from '../components/autocomplete';

// [...]
autocomplete();

So I am quite bad with Javascript but I inspected my page and found out that every marker has a different "tag" called "usemap" followed by gmimap and the number of the company in my database.

I tried everything to select this "usemap" but either I am too stupid to select it or it does not work this way as Javascript cant get this info from there.

Really hope someone has an easy solution here.. Thank you in advance

Sabrina
  • 309
  • 1
  • 14
  • 1
    Use `google.maps.event.addListener(marker, 'click', function(){});` to add an event listener. Although today I would really go with Leaflet instead of google maps, the documentation and API is superior. – max Nov 01 '18 at 15:25
  • Hi Max, thank you for the quick help. Do you mean I shall insert this line in the view page? I tried but it seems not to work. Or does it need to be put into the map.js file? Sorry but really new to Javascript.. – Sabrina Nov 05 '18 at 10:14
  • I just fixed it, actually do not know why it didnt work in the first place. Thanks! – Sabrina Nov 09 '18 at 17:10

0 Answers0