A
A
Alexander2016-01-12 19:57:32
JavaScript
Alexander, 2016-01-12 19:57:32

How to add js code to each INFOBOX in google maps api?

Hey!
There are many markers on the map. I'm using the InfoBox plugin to style the popup.
Inside the window is complex content (links, photo slider, buttons). It is necessary to hang events on the elements I need for each such infobox-window, initialize the slider jquery plugin.
Did (listing below), but there are strange brakes. When you click on the first marker - a window appears and everything works fine. When you click on each next marker, the browser freezes and there is a mess in the DOM, as if the html content of one window is superimposed on another. Clicking on the 4th-5th marker generally hangs the browser. And jquery falls into error too.
As I understand it, there is only one infobox container on the map, and by clicking on different markers, different html is simply loaded into it.
Tell me in which direction to move?
How to initialize the slider plugin only in the specific infobox that is currently on the screen?
Thank you!

function map_init(){

    var mapOptions = {...};		
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    $.getJSON("/get_markers.php", function(markers){
      for (var i = 0; i < markers.length; i++){
        createMarker(markers[i], map);
      }		
    });
}

function createMarker(m, map){
  
    var latlng = new google.maps.LatLng(m.lat, m.lng);

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      html: m.html
    });

    // infobox settings
    var boxText = document.createElement("div");
    boxText.innerHTML = m.html;

    var ibOptions = {
      content: boxText,
      ...
    };

    google.maps.event.addListener(marker, "click", function () {
      var ib = new InfoBox(ibOptions);
      ib.open(map, this);
      map.panTo(latlng);		
    });

    google.maps.event.addListener(ib, 'domready', function() {
      // здесь пытаюсь навесить какой-нибудь JS код / события / инициализацию плагина на каждый infobox
      $(".item_gallery, .infobox").brazzersCarousel();
    });

}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander, 2016-01-13
@librown

Self
-Response: enableEventPropagation: true

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question