Multiple popup toggle

Maps SDK for Web (JavaScript)
#1

Hi, I’m beginner using tomtom map, maybe my question look very stupid, sorry

I set two marker on a map, both with popup, I have two question:

  1. when I click on marker (any of them) it toggle both popup, hidden both not only the one I clicked, what’s wrong in my code?
  2. There is a way to set all popup hidden when open page (and after when clicking one marker show (toggle) only this popup)?
    This my test url
    https://idnet.it/tom.php

Thanks in advanced
Luca

#2

Hi and welcome!

I would have to see your code to help you better. In your example it only opened for me one popup at the time.

Did you add the popup to the map or to the marker?

Have a look at this example, I think it does what you want: https://developer.tomtom.com/maps-sdk-web-js/functional-examples#examples,map,custom-markers.html

Thanks

1 Like
#3

Excellent example, I’ll study it!
Meanwhile thi is my code, can you help me in find error?

indent preformatted text by 4 spaces

    var map = tt.map({
    key: '***************************',
    container: 'map',
    style: 'tomtom://vector/1/basic-main',
		center: [11.523257565694,43.802861844139],
	zoom: 5,
		language: 'it-IT',
    });

		map.addControl(new tt.FullscreenControl());
	map.addControl(new tt.NavigationControl());
		
		var TorinoCoordinates = [7.6761, 45.0781];
		var NapoliCoordinates = [14.2464100, 40.8563100];

		var markerHeight = 25, markerRadius = 10, linearOffset = 25;
		var popupOffsets = {
		 'top': [0, 0],
		  'top-left': [0,0],
		  'top-right': [0,0],
		  'bottom': [0, -markerHeight],
		  'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
		  'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
		  'left': [markerRadius, (markerHeight - markerRadius) * -1],
		  'right': [-markerRadius, (markerHeight - markerRadius) * -1]
		  };
		
		var element = document.createElement('div');
		element.id = 'marker';
		var marker = new tt.Marker({element: element}).setLngLat(TorinoCoordinates).addTo(map); // primo marker	puntato su Torino
		var popup = new tt.Popup({offset: popupOffsets}).setHTML("<b>TORINO</b><br/>Capoluogo Regione Piemonte<br><a class='vedisc' href='piemonte.html'>vedi scheda</a> ");
		marker.setPopup(popup).togglePopup();
			
		var elemento = document.createElement('div');
		elemento.id = 'marker2';
		var marker2 = new tt.Marker({element: elemento}).setLngLat(NapoliCoordinates).addTo(map); // secondo marker puntato su napoli
		var popup2 = new tt.Popup({offset: popupOffsets}).setHTML("<b>NAPOLI</b><br/>Capoluogo Regione Campania<br> <a class='vedisc' href='campania.html'>vedi scheda</a>");
		marker2.setPopup(popup2).togglePopup();