Search the Community
Showing results for tags 'infowindow'.
Found 1 result
-
Привет всем! Есть две карты на одной странице, на первой одна метка, на второй их пять Вопрос, как сделать к каждому маркеру свое инфоокно, чтобы они были всегда на виду, т.е. списком сбоку и когда на маркер нажимаешь, подсвечивается соответствующее инфоокно. И смена маркера при его выборе. Спасибо. <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>
