google maps api v3 hide a specific marker on button click
<p>I am working on aps.net MVC 5, I am using <strong>Google Maps Api V3</strong> in my project </p>

<p>Also, i am using <strong>dot net Highcharts</strong> to view my data in charts </p>

<p>There is a search functionality which is placed in a partial view and then it is rendering in another view </p>

<p>The map is in my Layout which is passed in my View where the search partial view is rendering </p>

<p>See the bellow image </p>

<p><a href="https://i.stack.imgur.com/t0bTu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t0bTu.jpg" alt="enter image description here"></a></p>

<p>Now, i want is whenever i select a serial number and after filling start and end date on <strong>show chart</strong> click the specific marker on the map will be visible only and all the other markers are hidden  </p>

<p>Bellow is my search controller code </p>

<pre><code>public ActionResult MultiGraph(string search, string start_date, string End_date, int? page)
    {//  search = "11111111";
        List&lt;SelectListItem&gt; items = new List&lt;SelectListItem&gt;();

        var dtt = db.ADS_Device_Data.Select(a =&gt; a.Device_Serial_Number).Distinct().ToList();

        foreach (var item in dtt)
        {
            if (!string.IsNullOrEmpty(item))
            {
                items.Add(new SelectListItem { Text = item, Value = item });
            }
        }
        ViewBag.search = items;
....... all other code for chart is placed here also 
}
</code></pre>

<p>Bellow is my Partial View of search </p>

<pre><code>@using (Html.BeginForm("MultiGraph", "Home", FormMethod.Get))
{
    &lt;div class="form-inline"&gt;
        @Html.DropDownList("search", null, "Select Serial Number", new { @class = "form-control", @style = "width:20%" })

        &lt;input type='text' name="start_date" id="startTime" class="form-control" placeholder="Start Date" autocomplete="off" /&gt;
        &lt;input type='text' name="End_date" id="endTime" class="form-control" placeholder="End Date" autocomplete="off" /&gt;
        &lt;input id="recall" type="submit" value="Show Chart" class="btn btn-success" autocomplete="off"/&gt;
        &lt;a href="@Url.Action("Index","Home")"&gt;
            &lt;img src="~/Image/back-button.png" alt="Go Back" title="Go Back" &gt;

        &lt;/a&gt;
        @*&lt;input type="button" value="Back" class="btn btn-success" onclick="@Html.ActionLink("Index","Home")"/&gt;*@
        @*&lt;button class="btn btn-success form-control" onclick="" name="Back" value="Back"&gt;&lt;/button&gt;*@
    &lt;/div&gt;}
</code></pre>

<p>It's rendering in <code>MultiGraph.cshtml</code> view </p>

<pre><code>Layout = "~/Views/Shared/_MLayout.cshtml";
&lt;p&gt;
&lt;div style="font-family:'Times New Roman' ; font-size:large" align="center"&gt;

    @Html.Partial("_Search")

&lt;/div&gt;
</code></pre>

<p></p></p>

<p>In above code <code>_MLayout.cshtml</code> is the layout for my charts </p>

<p>Bellow is my <code>_MLayout</code> code for chart</p>

<pre><code>&lt;div id="map" style="width: 320px; height: 350px; margin-top:-10px"&gt;&lt;/div&gt;
</code></pre>

<p>Bellow is the script for map </p>

<pre><code>&lt;script&gt;
//Map initialization
// Define your locations: HTML content for the info window, latitude, longitude
var locations =
[
    ['&lt;h4&gt;Meter# 11111111&lt;h4&gt;', 31.27045, 74.17811],
    ['&lt;h4&gt;Meter# 22222222&lt;h4&gt;', 31.26972, 74.17855],
    ['&lt;h4&gt;Meter# 33333333&lt;h4&gt;', 31.27081, 74.17964],
    ['&lt;h4&gt;Meter# 44444444&lt;h4&gt;', 31.27007, 74.18037],
    ['&lt;h4&gt;Meter# 55555555&lt;h4&gt;', 31.26956, 74.18123],
];

// Info Window Content
var infoWindowContent =
[

    //1
    ['&lt;div class="info_content"&gt;' +
     '&lt;h4&gt;Meter# 11111111&lt;/h4&gt;' +
     '&lt;h4&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;Accurate Pvt Ltd &lt;/br&gt;GSM Energy Meter&lt;/p&gt;' +
     '&lt;h4&gt;&lt;b&gt;Coordinates:&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;31.27045, 74.17811&lt;/p&gt;' + '&lt;/div&gt;'
    ],
    //2
    ['&lt;div class="info_content"&gt;' +
     '&lt;h4&gt;Meter# 22222222&lt;/h4&gt;' +
     '&lt;h4&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;Accurate Pvt Ltd &lt;/br&gt;GSM Energy Meter&lt;/p&gt;' +
     '&lt;h4&gt;&lt;b&gt;Coordinates:&lt;/b&gt;&lt;/h4s&gt;' +
     '&lt;p&gt;31.26972, 74.17855&lt;/p&gt;' + '&lt;/div&gt;'
    ],
    //3
    ['&lt;div class="info_content"&gt;' +
     '&lt;h4&gt;Meter# 33333333&lt;/h4&gt;' +
     '&lt;h4&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;Accurate Pvt Ltd &lt;/br&gt;GSM Energy Meter&lt;/p&gt;' +
     '&lt;h4&gt;&lt;b&gt;Coordinates:&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;31.27081, 74.17964&lt;/p&gt;' + '&lt;/div&gt;'
    ],
    //4
    ['&lt;div class="info_content"&gt;' +
     '&lt;h4&gt;Meter# 44444444&lt;/h4&gt;' +
     '&lt;h4&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;Accurate Pvt Ltd &lt;/br&gt;GSM Energy Meter&lt;/p&gt;' +
     '&lt;h4&gt;&lt;b&gt;Coordinates:&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;31.27007, 74.18037&lt;/p&gt;' + '&lt;/div&gt;'
    ],
     //5
    ['&lt;div class="info_content"&gt;' +
     '&lt;h4&gt;Meter# 55555555&lt;/h4&gt;' +
     '&lt;h4&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;Accurate Pvt Ltd &lt;/br&gt;GSM Energy Meter&lt;/p&gt;' +
     '&lt;h4&gt;&lt;b&gt;Coordinates:&lt;/b&gt;&lt;/h4&gt;' +
     '&lt;p&gt;31.26956, 74.18123&lt;/p&gt;' + '&lt;/div&gt;'
    ],
];



// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'blue-dot.png',
  iconURLPrefix + 'orange-dot.png',
  //iconURLPrefix + 'purple-dot.png',
  //iconURLPrefix + 'pink-dot.png',
  iconURLPrefix + 'yellow-dot.png'
]

var iconsLength = icons.length;

var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,
    center: new google.maps.LatLng(31.27016, 74.17932),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    //content: 'Power Monitoring Solutions',
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
});

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


var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i &lt; locations.length; i++) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
    });
    iconCounter++;

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    google.maps.event.addListener(map, "click", function (event) {
        infoWindow.close();
        autoCenter();
        //center: new google.maps.LatLng(31.27016, 74.17932)
    });

    google.maps.event.addListener(window, "click", function (event) {
        infoWindow.close();
        autoCenter();
        //center: new google.maps.LatLng(31.27016, 74.17932)
    });


    //google.maps.event.addListener(locations, 'mouseover', function () {
    //    locations.open(map, this);
    //});

    //google.maps.event.addListener(locations, 'mouseout', function () {
    //    locations.close();
    //});

    // We only have a limited number of possible icon colors, so we may have to restart the counter
    if (iconCounter &gt;= iconsLength) {
        iconCounter = 0;
    }
}

function autoCenter() {
    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
    //  Go through each...
    for (var i = 0; i &lt; markers.length; i++) {
        bounds.extend(markers[i].position);
    }
    //  Fit these bounds to the map
    map.fitBounds(bounds);
}
autoCenter();

&lt;/script&gt;
</code></pre>

<p>How to do this i have no idea at all</p>

<p><strong>Updated code</strong></p>

<p>I have added this piece of code into my script </p>

<pre><code>for (var i = 0; i &lt; locations.length; i++) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter],
        serialNumber: locations[i][3],
    });
    iconCounter++;

    var serialNumber = search;   

    // loop through all the markers
    for (var i = 0; i &lt; markers.length; i++) {
        if (markers[i].serialNumber != serialNumber) {
            markers[i].setMap(null);
        } else {
            google.maps.event.trigger(markers[i], 'click');
        }
    }
</code></pre>

<p>On 1st run i am getting bellow map </p>

<p><a href="https://i.stack.imgur.com/TuRPj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TuRPj.jpg" alt="enter image description here"></a></p>

<p>This marker is for serial number <code>55555555</code></p>

<p>Also for <code>55555555</code> serial number the info window is not showing </p>

<p>For now it's ok to have an empty map on first run but still this yellow marker is showing </p>

<p>Any help would be highly appreciated </p>