在外部div谷歌地图api v3关闭infowindow

时间:2015-06-26 17:11:07

标签: javascript jquery css google-maps google-maps-api-3

已更新,以显示该页面的所有代码和最终解决方案

我正在创建一个google maps infowindow,它会填充固定在屏幕右侧的潜水。我拥有它,所以一次只有一个infowindow开放,但我似乎无法关闭infowindow。我正在用数组拉动标记和infowindow内容。这是我的代码:

    jQuery( '#infocanvas' ).hide();
    jQuery( '#close-infocanvas' ).hide();
    var map;
    var overlay;
    USGSOverlay.prototype = new google.maps.OverlayView();
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsVisible = false;
    // Initialize the map and the custom overlay.

    function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();

        var styles = [ {
            featureType: "all",
            elementType: "labels",
            stylers: [
                { visibility: "simplified" }
            ]
            },{
            featureType: "poi",
            elementType: "labels",
            stylers: [
                { visibility: "on" }
            ]
            },{
            featureType: "labels.text",
            elementType: "labels",
            stylers: [
                { visibility: "off" }
            ]
            },{
            featureType: "road",
            elementType: "geometry",
            stylers: [
                { lightness: 100 },
                { visibility: "simplified" }
            ]
            },{
            featureType: "road",
            elementType: "labels",
            stylers: [
                { visibility: "o0" }
            ]
        }
    ];
    //  map.controls[google.maps.ControlPosition.TOP_LEFT].push($('<div id="infowindow"/>')[0]);
        var markers = new Array();

        locations = [
            ['Restrooms', 'Restrooms located on the 1st floor of the Student Services Center<br>(SSC)', 'restrooms', 35.188407, -101.847188, 4, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 2nd floor of the Student Services Center<br>(SSC)', 'restrooms', 35.188420, -101.847323, 5, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 2nd floor of the College Union Building<br>(CUB)', 'restrooms', 35.187952, -101.846269, 6, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 1st floor of Ordway Hall<br>(ORD)', 'restrooms', 35.188754, -101.848020, 7, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 1st floor of Ordway Hall<br>(ORD)', 'restrooms', 35.188759, -101.847878, 8, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 1st floor of Dutton Hall<br>(DUTT)', 'restrooms', 35.188903, -101.847750, 9, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Restrooms located on the 2nd floor of Dutton Hall<br>(DUTT)', 'restrooms', 35.188868, -101.847720, 10, "http://www.actx.edu/staff/images/icons/toilets.png"],
            ['Restrooms', 'Men\'s Restroom located on the 1st and 2nd floors of Durrett Hall<br>(DUR)', 'restrooms', 35.188796, -101.846931, 11, "http://www.actx.edu/staff/images/icons/toilets-men.png"],
            ['Restrooms', 'Women\'s Restroom located on the 1st and 2nd floors of Durrett Hall<br>(DUR)', 'restrooms', 35.188796, -101.846553, 12, "http://www.actx.edu/staff/images/icons/toilets-women.png"],
            ['Parking', 'Parking Lot 6<br />No sticker required', 'parking', 35.188878, -101.843967, 3, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 9<br />No sticker required', 'parking', 35.187010, -101.845769, 2, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 10<br />No sticker required', 'parking', 35.186830, -101.847218, 1, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 1<br />No sticker required', 'parking', 35.190173, -101.847839, 13, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 2<br />Temporary and ADA parking. No sticker required', 'parking', 35.189050, -101.847571, 14, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'ADA Accessible Parking', 'parking', 35.188969, -101.846949, 15, "http://www.actx.edu/staff/images/icons/parking_disabled.png"],
            ['Parking', 'Parking Lot 3<br />No sticker required', 'parking', 35.189642, -101.846635, 16, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 4<br />No sticker required', 'parking', 35.189432, -101.845564, 45, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 5<br />No sticker required', 'parking', 35.188998, -101.845323, 46, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 8<br />No sticker required', 'parking', 35.188033, -101.845189, 47, "http://www.actx.edu/staff/images/icons/parking.png"],
            ['Parking', 'Parking Lot 7<br />No sticker required', 'parking', 35.188337, -101.844390, 48, "http://www.actx.edu/staff/images/icons/parking.png"],


            ['<h3>Amarillo College - Testing Services</h3>', '<h5>1st Floor of the Student Services Center(SSC-101)</h5><p>The Testing Center is a unit of the Amarillo College Student Affairs Division. The Testing Center supports instruction, academic planning, and the community by providing various testing services for prospective students, current students and members of the community.</p>', 'testing', 35.188297, -101.846933, 40, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['Bookstore', '1st Floor of the College Union Building(CUB)<br />', 'bookstore', 35.187776, -101.846214, 41, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['<h3>Advising and Counseling<h3>', '<h5>1st Floor of the Student Services Center(SSC-130)</h5><p>Amarillo College considers academic advising essential to student success.  The goal of the Advising Department is to help students identify their goals, and to help students achieve those goals.  As a returning, current, or prospective student, it\'s important to build a relationship with an academic advisor.</p>', 'advising', 35.188482, -101.847017, 42, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['Financial Aid', '2nd Floor of the Student Services Center(SSC-210)<br />', 'financial', 35.188379, -101.847163, 43, "http://www.actx.edu/staff/images/icons/ac-sm.png"],
            ['Registrar', '1st Floor of the Student Services Center(SSC)<br />', 'registrar', 35.188364, -101.847523, 44, "http://www.actx.edu/staff/images/icons/ac-sm.png"],


            ['<h4>Lynn Library</h4>', '<div class="container-fluid"><div class="row"><div class="col-md-12"><div class="carousel slide" id="carousel-433230"><ol class="carousel-indicators"><li class="active" data-slide-to="0" data-target="#carousel-433230"></li><li data-slide-to="1" data-target="#carousel-433230"></li><li data-slide-to="2" data-target="#carousel-433230"></li></ol><div class="carousel-inner"><div class="item active"><img alt="Carousel Bootstrap First" src="http://lorempixel.com/output/sports-q-c-1600-500-1.jpg"/><div class="carousel-caption"><h4>First Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt="Carousel Bootstrap Second" src="http://lorempixel.com/output/sports-q-c-1600-500-2.jpg"/><div class="carousel-caption"><h4>Second Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt="Carousel Bootstrap Third" src="http://lorempixel.com/output/sports-q-c-1600-500-3.jpg"/><div class="carousel-caption"><h4>Third Thumbnail label</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#carousel-433230" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-433230" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div></div></div></div><p>Lynn Library and the <a href="https://www.actx.edu/library/pagesmith/21" target="_blank">Student Computing Center</a> are located on the 4th floor of the Lynn Library building. They provide extensive resources and services for AC students and employees.</p><ul><li><strong>Research classes:</strong> Lynn Library has numerous online research databases that cover a wide range of topics. Library instructors teach information literacy/database demo classes when requested by faculty. For more information, contact <a href="mailto:e0400185@actx.edu">Emily Gilbert</a> via email or phone at <a href="tel:806-371-5403">806-371-5403</a>.</li></ul><ul> <li><strong>Individual research help:</strong> Librarians and other trained staff work individually with students to find appropriate resources for assignments. Library instructors also work with faculty and staff who want to learn more about using the Library&rsquo;s resources effectively. Instruction can be customized by discipline. Call <a href="tel:806-371-5468">806-371-5468</a> or toll-free at <a href="https://www.actx.edu/library/866-371-5468">866-371-5468</a> for more information.</li></ul><ul><li><strong><a href="https://www.actx.edu/library/pagesmith/21" target="_blank">Student Computing Center</a>: </strong>Employees are available to help students with computer matters. Printing is available at 5 cents per page. Two-sided printing is available for documents that allow it. Wi-Fi is available for people affiliated with AC.</li></ul><ul> <li><strong>Study areas: </strong>The 4th floor has many study tables and two group computer collaboration stations.</li></ul>', 'buildings', 35.187797, -101.847094, 17, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Ordway Hall', '', 'buildings', 35.188526, -101.847976, 18, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Dutton Hall', '', 'buildings', 35.188832, -101.847606, 19, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Engineering Building', '', 'buildings', 35.188526, -101.846436, 20, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Durrett Hall', '', 'buildings', 35.188832, -101.846723, 21, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Russell Hall', '', 'buildings', 35.187797, -101.848011, 22, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Student Services Center', '', 'buildings', 35.188362, -101.847142, 23, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['College Union Building', '', 'buildings', 35.187797, -101.846366, 24, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Experimental Theatre', '', 'buildings', 35.188536, -101.845950, 25, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Concert Hall/Theater', '', 'buildings', 35.188699, -101.845603, 26, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Music Building', '', 'buildings', 35.188427, -101.845423, 27, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Amarillo Museum of Art', '', 'buildings', 35.188572, -101.845091, 28, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Warren Hall', '', 'buildings', 35.187884, -101.845795, 29, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Parcells Hall', '', 'buildings', 35.187008, -101.846520, 30, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['R.E. Byrd Business Building', '', 'buildings', 35.187129, -101.847129, 31, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Carter Fitness Center', '', 'buildings', 35.186944, -101.848002, 32, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Gilvin Broadcast Center', '', 'buildings', 35.186668, -101.846512, 33, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Science Lab Building', '', 'buildings', 35.187711, -101.845347, 34, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Amarillo Bible Chair', '', 'buildings', 35.186381, -101.845816, 35, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Bible Chair of the Southwest', '', 'buildings', 35.189461, -101.846817, 36, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Baptist Bible Chair', '', 'buildings', 35.189613, -101.844177, 37, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Amarillo Opera', '', 'buildings', 35.187619, -101.844515, 38, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Science Lab Building', '', 'buildings', 35.187711, -101.845347, 39, "http://www.actx.edu/staff/images/icons/ac.png"],
            ['Facilities Management Center', '', 'buildings', 35.191598, -101.848251, 40, "http://www.actx.edu/staff/images/icons/ac.png"]



            ];
        buildings = [

                    ['Lynn Library', '', 'buildings', '35.187797, -101.847094', 17, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Ordway Hall', '', 'buildings', '35.188526, -101.847976', 18, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Dutton Hall', '', 'buildings', '35.188832, -101.847606', 19, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Engineering Building', '', 'buildings', '35.188526, -101.846436', 20, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Durrett Hall', '', 'buildings', '35.188832, -101.846723', 21, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Russell Hall', '', 'buildings', '35.187797, -101.848011', 22, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Student Services Center', '', 'buildings', '35.188362, -101.847142', 23, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['College Union Building', '', 'buildings', '35.187797, -101.846366', 24, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Experimental Theatre', '', 'buildings', '35.188536, -101.845950', 25, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Concert Hall/Theater', '', 'buildings', '35.188699, -101.845603', 26, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Music Building', '', 'buildings', '35.188427, -101.845423', 27, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Amarillo Museum of Art', '', 'buildings', '35.188572, -101.845091', 28, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Warren Hall', '', 'buildings', '35.187884, -101.845795', 29, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Parcells Hall', '', 'buildings', '35.187008, -101.846520', 30, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['R.E. Byrd Business Building', '', 'buildings', '35.187129, -101.847129', 31, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Carter Fitness Center', '', 'buildings', '35.186944, -101.848002', 32, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Gilvin Broadcast Center', '', 'buildings', '35.186668, -101.846512', 33, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Science Lab Building', '', 'buildings', '35.187711, -101.845347', 34, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Amarillo Bible Chair', '', 'buildings', '35.186381, -101.845816', 35, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Bible Chair of the Southwest', '', 'buildings', '35.189461, -101.846817', 36, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Baptist Bible Chair', '', 'buildings', '35.189613, -101.844177', 37, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Amarillo Opera', '', 'buildings', '35.187619, -101.844515', 38, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Science Lab Building', '', 'buildings', '35.187711, -101.845347', 39, "http://www.actx.edu/staff/images/icons/ac.png"],
                    ['Facilities Management Center', '', 'buildings', '35.191598, -101.848251', 40, "http://www.actx.edu/staff/images/icons/ac.png"]


                    ];
        var minZoomLevel = 18;  
        var styledMap = new google.maps.StyledMapType(styles,
                    {name: "Styled Map"});
        var mapOptions = {
            zoom: 18,
            minZoom: 7,
            maxZoom: 21,
            tilt:0,
            center: new google.maps.LatLng(35.188435, -101.845448),
            mapTypeControlOptions: {
              mapTypeIds: [google.maps.MapTypeId.ROADS, 'map_style']
            }
        };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('directions-panel'));
      directionsDisplay.setOptions({suppressInfoWindows: true});


    // geolocation stuff  


      if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              pos = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);        


            }, function() {
              handleNoGeolocation(true);
            });
          } else {
            // Browser doesn't support Geolocation
            handleNoGeolocation(false);
          }

      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');

      var swBound = new google.maps.LatLng(35.186065, -101.848535);
      var neBound = new google.maps.LatLng(35.191990, -101.843090);
      var bounds = new google.maps.LatLngBounds(swBound, neBound);


      var srcImage = 'https://www.actx.edu/staff/images/Washington-Campus-New_trans9.png';
    //  srcImage += 'examples/full/images/talkeetna.png';

      // The custom USGSOverlay object contains the USGS image,
      // the bounds of the image, and a reference to the map.
      overlay = new USGSOverlay(bounds, srcImage, map);

      infocanvas = new google.maps.InfoWindow();



      var marker, i;

for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][3], locations[i][4]),
      map: map,
      store_id: locations[i][5],
      icon: locations[i][6]
          });
google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
        map.panTo(marker.getPosition());
        jQuery( '#close-infocanvas' ).css('visibility','visible');      
        jQuery( '#infocanvas' ).css('visibility','visible');
        jQuery( '#infocanvas' ).show();
        jQuery( '#close-infocanvas' ).show();   
        jQuery( '#infocanvas' ).empty();
        jQuery( '#infocanvas' ).append( locations[i][0]+"<br />"+locations[i][1] );
  }
})(marker, i));
markers.push(marker);       
  }

var closeInfocanvasX = document.getElementById('close-infocanvas-x');
google.maps.event.addDomListener(closeInfocanvasX, 'click', closeInfocanvas);

function closeInfocanvas() {
    jQuery( '#infocanvas' ).hide();
    jQuery( '#close-infocanvas' ).hide(); 
}

            // == shows all markers of a particular category, and ensures the checkbox is checked ==
              function show(category) {
                for (var i=0; i<locations.length; i++) {
                  if (locations[i][2] == category) {
                    markers[i].setVisible(true);
                  }
                }
              }

              // == hides all markers of a particular category, and ensures the checkbox is cleared ==
              function hide(category) {
                for (var i=0; i<locations.length; i++) {
                  if (locations[i][2] == category) {
                    markers[i].setVisible(false);
                  }
                }
              }

              // == show or hide the categories initially ==
             hide("parking");
             hide("restrooms");
             hide("testing");
             hide("bookstore");
             hide("advising");
             hide("financial");
             hide("registrar");
             hide("buildings");




                $(".checkbox").click(function(){
                    var cat = $(this).attr("value");

                    // If checked
                    if ($(this).is(":checked"))
                    {
                        show(cat);
                    }
                    else
                    {
                        hide(cat);
                    }
                  });

    }

    function calcRoute() {

        var mode;
        switch (document.getElementById("mode").value) {
          case "bicycling":
            mode = google.maps.TravelMode.BICYCLING;
            break;
          case "driving":
            mode = google.maps.TravelMode.DRIVING;
            break;
          case "walking":
            mode = google.maps.TravelMode.WALKING;
            break;
        }

          var start = pos;
          var end = document.getElementById('end').value;
          var request = {
            origin: pos,
            destination: end,
            travelMode: mode

          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          });
        }




    function handleNoGeolocation(errorFlag) {
          if (errorFlag) {
            var content = 'Error: The Geolocation service failed.';
          } else {
            var content = 'Error: Your browser doesn\'t support geolocation.';
          }

          var options = {
            map: map,
            position: new google.maps.LatLng(35.188435, -101.845448),
            content: content
          };

          var infocanvas = new google.maps.InfoWindow(options);
          map.setCenter(options.position);
        }

    // [END region_initialization]

    // [START region_constructor]
    /** @constructor */
    function USGSOverlay(bounds, image, map) {

      // Initialize all properties.
      this.bounds_ = bounds;
      this.image_ = image;
      this.map_ = map;

      // Define a property to hold the image's div. We'll
      // actually create this div upon receipt of the onAdd()
      // method so we'll leave it null for now.
      this.div_ = null;

      // Explicitly call setMap on this overlay.
      this.setMap(map);
    }
    // [END region_constructor]

    // [START region_attachment]
    /**
     * onAdd is called when the map's panes are ready and the overlay has been
     * added to the map.
     */
    USGSOverlay.prototype.onAdd = function() {

      var div = document.createElement('div');
      div.style.borderStyle = 'none';
      div.style.borderWidth = '0px';
      div.style.position = 'absolute';

      // Create the img element and attach it to the div.
      var img = document.createElement('img');
      img.src = this.image_;
      img.style.width = '100%';
      img.style.height = '100%';
      img.style.position = 'absolute';
      div.appendChild(img);

      this.div_ = div;

      // Add the element to the "overlayLayer" pane.
      var panes = this.getPanes();
      panes.overlayLayer.appendChild(div);
    };
    // [END region_attachment]

    // [START region_drawing]
    USGSOverlay.prototype.draw = function() {

      // We use the south-west and north-east
      // coordinates of the overlay to peg it to the correct position and size.
      // To do this, we need to retrieve the projection from the overlay.
      var overlayProjection = this.getProjection();

      // Retrieve the south-west and north-east coordinates of this overlay
      // in LatLngs and convert them to pixel coordinates.
      // We'll use these coordinates to resize the div.
      var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
      var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

      // Resize the image's div to fit the indicated dimensions.
      var div = this.div_;
      div.style.left = sw.x + 'px';
      div.style.top = ne.y + 'px';
      div.style.width = (ne.x - sw.x) + 'px';
      div.style.height = (sw.y - ne.y) + 'px';
    };
    // [END region_drawing]

    // [START region_removal]
    // The onRemove() method will be called automatically from the API if
    // we ever set the overlay's map property to 'null'.
    USGSOverlay.prototype.onRemove = function() {
      this.div_.parentNode.removeChild(this.div_);
      this.div_ = null;
    };
    // [END region_removal]

    google.maps.event.addDomListener(window, 'load', initialize);

以下是相关的html:

<div id="close-infocanvas" class="col-xs-12 col-sm-3">
<div id="close-infocanvas-x"><a href="#" class="show_hide"><i class="fa fa-angle-double-up fa-2x"></i></a></div></div>
<div id="infocanvas" class="col-xs-12 col-sm-3">

    

1 个答案:

答案 0 :(得分:1)

我认为对于infowindow存在一些困惑。您定义了一个名为“infocanvas”的新信息窗口,但之后您想要关闭名为“infowindow”的信息窗口。实际上,你正在使用一个简单的DIV。

在事件监听器“地图中,点击”只需隐藏您在代码顶部所做的DIV infocanvas:

google.maps.event.addListener(map, "click", function(event) {    
    jQuery( '#infocanvas' ).hide();
    jQuery( '#close-infocanvas' ).hide();
});

还有一件事,var map应该不在initialize函数中。只有:

 var map;

然后在函数“initialize”中定义此变量的值

map = new google.maps.Map (document.getElementById ("map-canvas'), MapOptions);

没有“var”这个词。

因此变量“map”将在代码的任何部分中可用。 此时,第343行中的代码无法访问变量“map”。

“var markers”也应该不在初始化函数中,您必须创建一个特定的函数来将标记添加到地图中。

必须通过将代码细分为更小的函数来最小化“初始化”函数。这样,您可以组织代码并更容易检测错误。

您可以在maps with multiple markers找到更多相关信息。