A
A
Andrew Sky2015-06-09 18:07:35
JavaScript
Andrew Sky, 2015-06-09 18:07:35

Gmap.js how to open an infoWindow on the map when clicking on links outside the map?

There is a map with labels and an infoWindow on the page. When clicking on the labels, everything works fine, but under the map there is a list with links that, when clicked, should open certain infoWindow, labels.
To build the map, the gmap.js plugin was used - https://hpneo.github.io/gmaps/
An example is what you need - www.geocodezip.com/v3_MW_example_map2.html
Map call function:

function GMapsInit(){
    if($('#gomap').length) {
      map = new GMaps({
        div: '#gomap',
        zoom: 4,
        lat: 55.02480160288231,
        lng: 82.92944544445794,
        scrollwheel: false,
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
        zoomControl: true,
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
      });
      
      $('.dealers-map .point li').each(function(){
        var coordinat = $(this).data('coordinat');
        var urlPath = $(this).data('url');
        var name = $(this).data('name');
        var idItem = $(this).data('id');
        var arrCoordinat = coordinat.split(',');
        var itemArr = [];
        
        $(this).find('p').each(function(){
          var item = $(this).text();
          
          itemArr.push('<p>'+item+'</p>');
        });
        var items = itemArr.join('');
        
        map.addMarker({
          lat: arrCoordinat[0],
          lng: arrCoordinat[1],
          title: 'bx-id-'+idItem,
          icon: '/bitrix/templates/main/img/icon-marker.png',
          infoWindow: {
            content: '<div id="bx-id-'+idItem+'" class="baloon-innr"><h3>'+name+'</h3>'+items+'<a href="'+urlPath+'">Контактная информация</a></div>'
          }
        });
        
      });
      
      $('.contact-city_wrap a').click(function(){
          var link = $(this).data('id');
          
          console.log('#'+link);
      });
      
    }
  }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Victor Victor, 2015-06-18
@Sky161

I usually create a global type object in such cases
(It is important that the data-id of point li and .contact-city_wrap a are the same)

function GMapsInit(){
    if($('#gomap').length) {
      var mapMarkers= {}; // создаю объект, в который буду добавлять маркеры по айди
      map = new GMaps({
        div: '#gomap',
        zoom: 4,
        lat: 55.02480160288231,
        lng: 82.92944544445794,
        scrollwheel: false,
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false,
        zoomControl: true,
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_BOTTOM
        },
      });
      
      $('.dealers-map .point li').each(function(){
        var coordinat = $(this).data('coordinat');
        var urlPath = $(this).data('url');
        var name = $(this).data('name');
        var idItem = $(this).data('id');
        var arrCoordinat = coordinat.split(',');
        var itemArr = [];
        
        $(this).find('p').each(function(){
          var item = $(this).text();
          
          itemArr.push('<p>'+item+'</p>');
        });
        var items = itemArr.join('');
        
        // создаю маркер, сохраняю ссылку в переменную
        var marker = map.addMarker({
          lat: arrCoordinat[0],
          lng: arrCoordinat[1],
          title: 'bx-id-'+idItem,
          icon: '/bitrix/templates/main/img/icon-marker.png',
          infoWindow: {
            content: '<div id="bx-id-'+idItem+'" class="baloon-innr"><h3>'+name+'</h3>'+items+'<a href="'+urlPath+'">Контактная информация</a></div>'
          }
        });

         // добавляю маркер на карту
         map.map.addMarker(marker );

         // добавляю ссылку на маркер в объект
         mapMarkers[idItem ] = marker;
      });
      
      $('.contact-city_wrap a').click(function(){
          var link = $(this).data('id');
          // беру маркер по айди
          var marker = mapMarkers[link];
          // если такой есть - показываю
          if (marker) {
               google.maps.event.trigger(marker, "click");
          }
      });
      
    }
  }

Example: jsbin.com

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question