@Sky161
Начинающий Web-разработчик

Gmap.js как при клике на ссылки вне карты, открывать infoWindow на карте?

Есть на странице карта с метками и infoWindow. При клике на метки все работает отлично, но под картой есть список с ссылками, при клике на которые должны открывать определенные infoWindow, меток.
Для построения карты использовался плагин gmap.js -https://hpneo.github.io/gmaps/
Пример то что нужно - www.geocodezip.com/v3_MW_example_map2.html
Функция вызова карты:
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);
			});
			
		}
	}
  • Вопрос задан
  • 1303 просмотра
Решения вопроса 1
toptalo
@toptalo
undefined
Я обычно в таких случаях создаю глобальный объект типа
(Важно чтоб data-id у point li и у .contact-city_wrap a были одинаковыми )
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");
          }
      });
      
    }
  }


Пример: jsbin.com
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы