javascript - Only show one map location window at a time -
i'm using script show small info windows next each respective map location, using google maps api.
the problem click location 01, location 02 etc small windows remain open , can appear on top of each other, isn't user friendly.
what need have 1 of small info windows can visible @ given time. example, if click 'location 01' other info windows might have been open close.
you can see fiddle in action here: https://jsfiddle.net/vm4cksue/
...or view code here...
(function($) { function new_map( $el ) { // var var $markers = $el.find('.marker'); // vars var args = { //zoom : 14, center : new google.maps.latlng(0, 0), scrollwheel : false, maptypeid : google.maps.maptypeid.roadmap, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.horizontal_bar, position: google.maps.controlposition.top_right } }; // create map var map = new google.maps.map( $el[0], args); // add markers reference map.markers = []; // add markers // add identifying number each marker var sidebar = 1; $markers.each(function(){ add_marker( $(this), map, sidebar); sidebar++; }); // center map center_map( map ); // return return map; } function add_marker( $marker, map, sidebar ) { // dynamic lat & long var latlng = new google.maps.latlng( $marker.attr('data-lat'), $marker.attr('data-lng') ); // dynamic marker var icon = $marker.attr('data-icon'); // create marker var marker = new google.maps.marker({ position: latlng, map: map, animation: google.maps.animation.drop, // animation icon: icon, }); // add array map.markers.push( marker ); // if marker contains html, add infowindow if( $marker.html() ) { // create info window var infowindow = new google.maps.infowindow({ content : '<div id="iw-container">' + $marker.html() + '</div>' }); /* * google.maps.event.addlistener() event waits * creation of infowindow html structure 'domready' * , before opening of infowindow defined styles * applied. */ google.maps.event.addlistener(infowindow, 'domready', function() { // reference div receives contents of infowindow using jquery var iwouter = $('.gm-style-iw'); // restyle parent divs var iwbackground = iwouter.prev(); // removes background shadow div iwbackground.children(':nth-child(2)').css({'display' : 'none'}); // removes white background div iwbackground.children(':nth-child(4)').css({'display' : 'none'}); // moves infowindow 115px right. iwouter.parent().parent().css({left: '125px'}); // moves shadow of arrow 76px left margin. iwbackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 26px !important;'}); // moves arrow 76px left margin. iwbackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 26px !important;'}); // changes desired tail shadow color. iwbackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'}); // restyle child divs var iwbackground = iwouter.next(); // set new variable iwclosebtn. var iwclosebtn = iwouter.next(); // hide default google maps sprite on close tag iwclosebtn.children(':nth-child(1)').css({'display' : 'none'}); // apply desired effect close button iwclosebtn.css({ width: '45px', height: '45px', opacity: '1', // default close button has opacity of 0.7 right: '0', top: '0', // button repositioning 'background-image':'url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-32.png)', // adding background image 'background-size': '25px', 'background-position': 'center', 'background-repeat': 'no-repeat' }); // api automatically applies 0.7 opacity button after mouseout event. // function reverses event desired value. iwclosebtn.mouseout(function(){ $(this).css({opacity: '1'}); }); }); // create click on sidebar list , open info window $('#m'+sidebar).click(function(){ // close info windows $.each(map.markers, function(index,value){ if(infowindow) infowindow.close(); }); // click on marker google.maps.event.trigger(marker, "click"); }); // show info window when marker clicked google.maps.event.addlistener(marker, 'click', function() { infowindow.open( map, marker ); }); } } function center_map( map ) { // vars var bounds = new google.maps.latlngbounds(); // loop through markers , create bounds $.each( map.markers, function( i, marker ){ var latlng = new google.maps.latlng( marker.position.lat(), marker.position.lng() ); bounds.extend( latlng ); }); // 1 marker? if( map.markers.length == 1 ) { // set center of map map.setcenter( bounds.getcenter() ); //map.setzoom( 14 ); } else { // fit bounds //map.fitbounds( bounds ); map.setcenter( bounds.getcenter() ); map.setzoom( 7 ); } } var map = null; $(document).ready(function(){ $('.acf-map').each(function(){ // create map map = new_map( $(this) ); }); }); })(jquery);
you declare window level var actopenwindow store actual open window , close before open new one
var actinfowindow = null; then in listener shoul manage proper situation
google.maps.event.addlistener(marker, 'click', function() { if (actinfowindow){ actinfowindow.close(); } if (infowindow!==actinfowindow){ infowindow.open( map, marker ); actinfowindow = infowindow; } else { actinfowindow.close(); actinfowindow = null; } }); see https://jsfiddle.net/j10axkhc/5/ test
Comments
Post a Comment