CODEWITHSUNDEEP
javascriptgoogle-maps
RonnieT
RonnieT

Reputation: 2203

Closing InfoWindow - Closing onclick - Google Map

I cant for the life of me get only one infoWindow to display at a time in V3 of API. I need one to close prior to the next opening. Also looking to have the infoWindow close onclick anywhere on the map. Does this go within the initialize function?

Here is my full script: 

// defining vars
var map = null;
var markers = [];
var adUnit;
var center = new google.maps.LatLng(39.676502,-105.162101);

// function that soley initializes the new map object
function initialize() {

    var mapOptions = {
        zoom: 10,
        center: center,
            mapTypeControl: true,
            mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            },
            zoomControl: true,
                    zoomControlOptions: {
                      style: google.maps.ZoomControlStyle.SMALL,
                      position: google.maps.ControlPosition.LEFT_BOTTOM
                    },
            panControl: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map($('#map_canvas')[0], mapOptions);
    // call the loader function
    loadXML();

    // Adsense Options                                 
    var adUnitDiv = document.createElement('div');
    var adUnitOptions = {
      format: google.maps.adsense.AdFormat.BUTTON,
      position: google.maps.ControlPosition.RIGHT_BOTTOM,
      publisherId: 'ca-google-maps_apidocs',
      map: map,
      visible: true
    };
    adUnit = new google.maps.adsense.AdUnit(adUnitDiv, adUnitOptions);     

      google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });                       


} //<-- Initialize

// load (and map) the markers from XML data
function loadXML() {
    $.get('data.xml', function(data) {
        // var bounds = new google.maps.LatLngBounds();   //<--- Size map to bounds of markers LatLng
        $(data).find('marker').each(function() {

            var lat = $(this).attr('lat')
            var lng = $(this).attr('lng')
            var name = $(this).attr('name')
            var type = $(this).attr('type')

            var LatLng   = new google.maps.LatLng(parseFloat($(this).attr('lat')),
                                    parseFloat($(this).attr('lng')));

            var myToggleData = {                    //<---- collecting data to be toggled on/off
                type      : $(this).attr('type'),
                skill         : $(this).attr('skill'),
                eta_whatever_that_means : parseFloat($(this).attr('eta'))
            }        

            var marker      = new google.maps.Marker({
                position : LatLng,
                map         : map,
                icon     : 'images/marker.png',
                title     : $(this).attr('name'),
                data     : myToggleData
            });

              var html ='<div id="winBackground">          <div class="winTitle">' + name + '</div>          <div class="winHead">Type: <div class="winData">' + type + '</div></div>   </div>';


              // create the infoWindow
              var infoWindow = new google.maps.InfoWindow();
              // add a listener to open the infoWindow when a user clicks on one of the markers
              google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
              });

            markers.push(marker);
            // bounds.extend(LatLng);
        });


        // map.fitBounds(bounds);
    });
}
// The toggleMarker function
function toggleMarkers(attr,val) {
    if (markers){
        for (i in markers) {
            if(markers[i].data[attr] == val){
                var visibility = (markers[i].getVisible() == true) ? false : true;
                markers[i].setVisible(visibility);
            }
        }
    }
}

Upvotes: 4

Views: 8196

Answers (4)

user1724001
user1724001

Reputation: 119

   google.maps.event.addListener(marker, 'click', function() {
        if(!marker.open){
            infowindow.open(map,marker);
            marker.open = true;
        }
        else{
            infowindow.close();
            marker.open = false;
        }
        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            marker.open = false;
        });
    });

Try this it would work

Upvotes: 2

ATOzTOA
ATOzTOA

Reputation: 35950

Try something like this:

if(popup) {
    popup.close();
}

popup = new google.maps.InfoWindow({
    content:'My New InfoWindow',
});

popup.open(map, marker);

Upvotes: 0

Mariano Grandioso
Mariano Grandioso

Reputation: 1205

This will close all infoWindows on map click (without the need to have a reference to the infoWindow object).

google.maps.event.addListener( map, 'click', function() { 
    infowindow.open( null, null ); 
} );

Upvotes: 2

js1568
js1568

Reputation: 7032

Don't create a new InfoWindow for every marker. Only create one InfoWindow and then when you change it, do the following:

infowin.setContent("");
infowin.open(map, marker);

Upvotes: 6

Related Questions