Создание отдельное infowindow к каждаму маркеру

Mary_RND · January 22, 2016

Привет всем!

Есть две карты на одной странице, на первой одна метка, на второй их пять

Вопрос, как сделать к каждому маркеру свое инфоокно, чтобы они были всегда на виду, т.е. списком сбоку и когда на маркер нажимаешь, подсвечивается соответствующее инфоокно.

И смена маркера при его выборе.

Спасибо.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">	// When the window has finished loading create our google map below	google.maps.event.addDomListener(window, 'load', init);	function init() {		// Basic options for a simple Google Map		// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions        var pos1 = new google.maps.LatLng(59.921090, 30.343043);//SpB        var pos2 = new google.maps.LatLng(55.7695689, 37.6226591);         var pos3 = new google.maps.LatLng(55.7379675, 37.625534);         var pos4 = new google.maps.LatLng(55.7580242, 37.5633864);        var pos5 = new google.maps.LatLng(55.7387458, 37.6552768);        var pos6 = new google.maps.LatLng(55.7387478, 37.6549528);		///SPB MAP =============================================================================		var mapOptions = {			// How zoomed in you want the map to start at (always required)			zoom: 17,			// The latitude and longitude to center the map (always required)			center: new google.maps.LatLng(59.921090, 30.343043), // SpB									mapTypeId: google.maps.MapTypeId.ROADMAP,			// How you would like to style the map. 			// This is where you would paste any style found on Snazzy Maps.			styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}]		};		// Get the HTML DOM element that will contain your map 		// We are using a div with id="map" seen below in the <body>		var mapElement = document.getElementById('map_spb');		// Create the Google Map using our element and options defined above		var map = new google.maps.Map(mapElement, mapOptions);				var image =  'images/beachflag.png';		///MSK MAP =============================================================================		var mapOptions2 = {			// How zoomed in you want the map to start at (always required)			zoom: 12,			// The latitude and longitude to center the map (always required)			center: new google.maps.LatLng(55.772153, 37.622246), // SpB									mapTypeId: google.maps.MapTypeId.ROADMAP,			// How you would like to style the map. 			// This is where you would paste any style found on Snazzy Maps.			styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]		};		// Get the HTML DOM element that will contain your map 		// We are using a div with id="map" seen below in the <body>		var mapElement = document.getElementById('map_msk');		// Create the Google Map using our element and options defined above		var map2 = new google.maps.Map(mapElement, mapOptions2);				var image2 =  'images/beachflag_a.png';									// Let's also add a marker while we're at it		var marker = new google.maps.Marker({<!-- 		position: new google.maps.LatLng(59.921090, 30.343043), -->			position: pos1,			map: map,			title: 'Текст',			icon: image		});	  		  		var marker = new google.maps.Marker({			position: pos2,			map: map2,			title: 'Текст',			icon: image2		});		  	  		var marker = new google.maps.Marker({			position: pos3,			map: map2,			title: 'Текст',			icon: image2		});		var marker = new google.maps.Marker({			position: pos4,			map: map2,			title: 'Текст',			icon: image2		});		var marker = new google.maps.Marker({			position: pos5,			map: map2,			title: 'Текст',			icon: image2		});		var marker = new google.maps.Marker({			position: pos6,			map: map2,			title: 'Текст',			icon: image2		});          // Creating an InfowWindow                     var infowindow = new google.maps.InfoWindow({            content: 'Hello world'          });                    // Adding a click event to the marker          google.maps.event.addListener(marker, 'click', function() {            // Opening the InfoWindow          	infowindow.open(map2, marker);          });	}</script>

Edited January 25, 2016 by Mary_RND

Mary_RND · January 29, 2016

Разобралась с этим вопросом, зато возник другой...

Сделала, через блок, на который нажимая карта центрируется по метке. Как сделать чтобы изменить маркер с неактивного на активный?

Смогла реализовать только наведение на сам маркер, а надо на блок с описанием (

            var image_msk = new google.maps.MarkerImage(  'images/beachflag_msk.png',  new google.maps.Size(81,112), new google.maps.Point(0,0), new google.maps.Point(0,112));            var    image_mskHover = new google.maps.MarkerImage( 'images/beachflag_msk.png', new google.maps.Size(81,112), new google.maps.Point(0,112), new google.maps.Point(0,112) );                        var marker2 = new google.maps.Marker({                position: pos2,                map: map_msk,                icon: image_msk            });            google.maps.event.addListener(marker2,'click', function() {                marker2.setIcon(image_mskHover);            });            google.maps.event.addListener(marker2, 'mouseout', function() {                marker2.setIcon(image_msk);            })

Sign In

Создание отдельное infowindow к каждаму маркеру

Question

Mary_RND

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Mary_RND

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information