Answer the question
In order to leave comments, you need to log in
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
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");
}
});
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question