google map close markers while others are opened

I have been working with cutsomizing a google map for my website for a while now, and Can't figure out how to close other markers when another is opened. I have called for the mouseout code to close the markers for now, but it's a lame patch and would like to figure out a better way to do it.

Here's some of the marker script.

I think if I added something like infoWindow.close(); or infoWindow. + infoWindow2. + infoWindow3. + close(); to the onClick function() it might work but I don't know the proper area to do this or if this is valid.

    // 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');
      // Create the Google Map using out element and options defined above
      var map = new google.maps.Map(mapElement, mapOptions);

      var image = 'img/marker.png';
    var office = new google.maps.Marker({
      position: myLatLng,
      map: map,
      animation: google.maps.Animation.BOUNCE,
      icon: image,
      title: 'Coven-Goldman'
    });

        myInfoWindowOptions = {
    content: '<div class="hideonmob info-window-content"   <h4   Hello! This is our office. </h4   <p   Please click on the other locations to see
information on our properties.</p   <p   <img style="width:20px"
src="img/logosmall.png"   </p   </div   ',
    maxWidth: 275   };

  infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

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

  google.maps.event.addListener(office, 'dragstart', function(){
    infoWindow.close();   });

  google.maps.event.addListener(office, 'mouseover', function(){
    infoWindow.close();   });

  infoWindow.open(map,office);



      var image = 'img/marker.png';
    var marker2 = new google.maps.Marker({
      position: buildingone,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: image,
      title: 'Coven-Goldman'
    });


        myInfoWindowOptions = {
    content: '<div class="hideonmob info-window-content"   <h4   24475 Hilltop Dr <br    Beachwood, OH </h4   <p   Please click on the other
locations to see information on our properties.</p   <p   <img
style="width: 100%;" src="img/23800CommerceShad.jpg"   </p   </div   ',
    maxWidth: 275   };

  infoWindow2 = new google.maps.InfoWindow(myInfoWindowOptions);

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

  google.maps.event.addListener(marker2, 'dragstart', function(){
    infoWindow2.close();   });

 google.maps.event.addListener(marker2, 'mouseover', function(){
    infoWindow2.close();   });


 var image = 'img/marker.png';
    var marker3 = new google.maps.Marker({
      position: buildingtwo,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: image,
      title: 'Coven-Goldman'
    });


             myInfoWindowOptions = {
    content: '<div class="hideonmob info-window-content"   <h4   24475 Hilltop Dr <br    Beachwood, OH </h4   <p   Please click on the other
locations to see information on our properties.</p   <p   <img
style="width: 100%;" src="img/23800CommerceShad.jpg"   </p   </div   ',
    maxWidth: 275   };

  infoWindow3 = new google.maps.InfoWindow(myInfoWindowOptions);

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

  google.maps.event.addListener(marker3, 'dragstart', function(){
    infoWindow3.close();   });

 google.maps.event.addListener(marker3, 'mouseover', function(){
    infoWindow3.close();   });


 var image = 'img/marker.png';
    var marker4 = new google.maps.Marker({
      position: buildingthree,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: image,
      title: 'Coven-Goldman'
    });


                 myInfoWindowOptions = {
    content: '<div class="hideonmob info-window-content"   <h4   24475 Hilltop Dr <br    Beachwood, OH </h4   <p   Please click on the other
locations to see information on our properties.</p   <p   <img
style="width: 100%;" src="img/23800CommerceShad.jpg"   </p   </div   ',
    maxWidth: 275   };

  infoWindow4 = new google.maps.InfoWindow(myInfoWindowOptions);

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

  google.maps.event.addListener(marker4, 'dragstart', function(){
    infoWindow4.close();   });

  google.maps.event.addListener(marker4, 'mouseover', function(){
    infoWindow4.close();   });

A live link to my site

Upvotes: 0

Answers (1)

Bryan Weaver

Reputation: 4473

In the question you said you need to close the markers, but I am assuming you mean close the infoWindow on the marker. You do not need a separate instance of an infoWindow for each marker. In fact that is not the recommended practice. Here is some further documentation on dealing with infoWindows.

Also, you have a lot of duplicate code. Cleaning this up will help make it easier.

This should help push you in the right direction (I haven't tested this code for syntax errors, but the general flow should be correct):

// 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');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);

myInfoWindowOptions = {
    maxWidth: 275   
};

infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);    

//construct custom objects to handle the information that will change.
var office = {
    position: myLatLng,
    title: "title information",
    content: "infowindow content"
};

var building1 = {
    position: buildingone,
    title: "title information",
    content: "infowindow content"
};

var building2 = {
    position: buildingtwo,
    title: "title information",
    content: "infowindow content"
};

var building3 = {
    position: buildingthree,
    title: "title information",
    content: "infowindow content"
};

//store the objects in a array
var buildings = [office, building1, building2, building3];
//marker array to store marker instances if you need them later.
var markers = []; 

//loop through object array and construct the markers
for (var i = 0; i < buildings.length; i++) {
    var marker = new google.maps.Marker({
        position: buildings[i].position,
        map: map,
        animation: google.maps.Animation.BOUNCE,
        icon: 'img/marker.png',
        title: buildings[i].title
    });

    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(buildings[i].content);
        infoWindow.setTitle(buildings[i].title);
        infoWindow.setPosition(buildings[i].position);
        infoWindow.open(map, marker);
    });

    google.maps.event.addListener(marker, 'dragstart', function () {
        infoWindow.close();
    });

    google.maps.event.addListener(marker, 'mouseover', function () {
        infoWindow.close();
    });

    //add marker to array
    markers.push(marker);
}

//open office infowindow.
infoWindow.setPosition(office.position);
infoWindow.setTitle(office.title);
infoWindow.setContent(office.content);
infoWindow.open(map, office.position);

Upvotes: 1

google map close markers while others are opened

Answers (1)

Related Questions