close specific infoWindow / Hide Polyline Google maps api v3_问答_开发者

I need to be able to show hide an individual polyline and its associated infoWindow+ Marker.

Here is my code, at the moment the clearOverlays() function is hiding all markers, i need to be able to hide the specific marker using the hideRoutePath() functions in the links at the bottom.. Any help appreciaed on this as I have run out of ideas.. thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<title>test</title> 

<script type='text/javascript'> 

var map = null;
var markersArray = [];

//default load position
function initialize() {
    var latlng = new google.maps.LatLng(51.41859298,0.089179345);

    var settings = {
        zoom: 11,
        center: latlng,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: 'white'
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), settings);

}
// End initialize function

function clearOverlays() {

  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);

    }
  }
}


// Mapping variables
var global_strokeColor = "#ED开发者_如何学运维00FF";
var global_strokeOpacity = 0.7;
var global_strokeWeight = 6;

//Route 1
function showRoutePath_1() {

    position = new google.maps.LatLng(51.41859298,0.089179345);
    var infowindow = new google.maps.InfoWindow({content: "Beaverwood School"});
    var marker = new google.maps.Marker({position: position,map: map});

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

    markersArray.push(marker);

    //open infowWindow with marker
    infowindow.open(map, marker);
    //setTimeout(function () { infowindow.close(); }, 5000);

    bromley_route638 = new google.maps.Polyline({
      path: [
      new google.maps.LatLng(51.408664,0.114405),
      new google.maps.LatLng(51.412973,0.114973),
      new google.maps.LatLng(51.417979,0.097195),
      new google.maps.LatLng(51.421214,0.023720)],
      strokeColor: global_strokeColor,
      strokeOpacity: global_strokeOpacity,
      strokeWeight: global_strokeWeight
    });

    bromley_route638.setMap(map);

}
// End Route 1

//Route 2
function showRoutePath_2() {

    position = new google.maps.LatLng(51.382522,0.045018);

    var infowindow = new google.maps.InfoWindow({content: "Bishops Justus School"});
    var marker = new google.maps.Marker({position: position,map: map});

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

    markersArray.push(marker);

    //open infowWindow with marker
    infowindow.open(map, marker);
    //setTimeout(function () { infowindow.close(); }, 5000);

    bromley_route638Run2 = new google.maps.Polyline({
      path: [
      new google.maps.LatLng(51.369530,0.002027),
      new google.maps.LatLng(51.375388,0.010733),
      new google.maps.LatLng(51.377991,0.009467),
      new google.maps.LatLng(51.401988,0.017248)],
      strokeColor: global_strokeColor,
      strokeOpacity: global_strokeOpacity,
      strokeWeight: global_strokeWeight
    });

    bromley_route638Run2.setMap(map);

}
//End Route 2


//Hide Routes
function hideRoutePath(number) {
    if(number == 1) {
    clearOverlays();
    bromley_route638.setMap(null);
    }
    else if(number == 2) {
    clearOverlays();
    bromley_route638Run2.setMap(null);}
}

</script> 

</head> 

<body onload='initialize()'> 

    <div id="map_canvas"></div>

    <a class="exp" id="myMenu1">View schools in Hackney</a>

    <div class="expandable_box" id="myDiv1">
        <p>Select a school to view its bus route and location.</p>
        <a href="#" onClick="showRoutePath_1();"> Beaverwood School +</a> / <a href="#" onClick="hideRoutePath(1);">-</a><br/>
        <a href="#" onClick="showRoutePath_2();"> Bishop Justus School +</a> / <a href="#" onClick="hideRoutePath(2);">-</a>
    </div>

</body> 
</html>

it looks like you just need to declare your routes as global variables. add the following to the top of your script

var bromley_route638, bromley_route638Run2;

Here is the full JSFiddle Demo:

Here is one way to do it, but the code can be optimized. First i added two new functions removeMarker and checkMarker. removeMarker, removes a marker from the map and also from the array so you won't have lingering markers at the same spot more than once. checkMarker, checks to see if the marker is already on the map and in the global markersArray. It returns true if it is else returns false. We use checkMarker to make sure we don't create multiple instance of the marker at the same latlng. in your case it's marker route 1 and marker route 2.

//remove specific marker from map
function removeMarker(myMark) {
    if (markersArray) {
        for (var i in markersArray) {
            if (myMark == markersArray[i]['number']) {
                console.log(markersArray[i]['number']);
                markersArray[i].setMap(null);
                markersArray.splice(i,1); //removes marker from array
                break;
            }
        }
    }
}

//check if marker already exist on map
function checkMarker(number){
    if(markersArray){
        for(var i in markersArray){
            if(markersArray[i]['number'] == number)
                return true;
        }
    } else 
        return false;
}

I then add a marker checker using checkMarker to make sure we don't create double marker with it's associate route, and also i gave your maker an unique "number" identifier. With 1 being marker1 and 2 being marker2. These two mod should be in functions showRoutePath_1 and showRoutePath_2:

//check if marker1 already on map if true do nothing
if(checkMarker(1))  //check if marker already in global marker array/map if marker 2 replace 1 with 2
    return;
position = new google.maps.LatLng(51.41859298, 0.089179345);
var infowindow = new google.maps.InfoWindow({
    content: "Beaverwood School"
});
var marker = new google.maps.Marker({
    position: position,
    map: map
});
marker['number'] = 1; //Here is the unique identifier we assign.  if marker 2 replace 1 with 2

Last but not least, i change your hideRoutePath by adding an identifier param "number", and use removeMarker function to hide/remove the associate path and marker:

function hideRoutePath(number) {
    if (number == 1) {
        //clearOverlays();
        bromley_route638.setMap(null);
    }
    else if (number == 2) {
        //clearOverlays();
        bromley_route638Run2.setMap(null);
    }
    removeMarker(number);
}