fasi fasi - 2 months ago 7
Javascript Question

google maps api v3 hide a specific marker on button click

I am working on aps.net MVC 5, I am using Google Maps Api V3 in my project

Also, i am using dot net Highcharts to view my data in charts

There is a search functionality which is placed in a partial view and then it is rendering in another view

The map is in my Layout which is passed in my View where the search partial view is rendering

See the bellow image

enter image description here

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

Bellow is my search controller code

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

var dtt = db.ADS_Device_Data.Select(a => 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
}


Bellow is my Partial View of search

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

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

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


It's rendering in
MultiGraph.cshtml
view

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

@Html.Partial("_Search")

</div>




In above code
_MLayout.cshtml
is the layout for my charts

Bellow is my
_MLayout
code for chart

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


Bellow is the script for map

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

// Info Window Content
var infoWindowContent =
[

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



// 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 < 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 >= iconsLength) {
iconCounter = 0;
}
}

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

</script>


How to do this i have no idea at all

Updated code

I have added this piece of code into my script

for (var i = 0; i < 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 < markers.length; i++) {
if (markers[i].serialNumber != serialNumber) {
markers[i].setMap(null);
} else {
google.maps.event.trigger(markers[i], 'click');
}
}


On 1st run i am getting bellow map

enter image description here

This marker is for serial number
55555555


Also for
55555555
serial number the info window is not showing

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

Any help would be highly appreciated

Answer

What you need to do is have some way of identifying each marker by its ID / serial number, the 1111111 part. Ideally you'd amend your locations array to have that as its own value, or you could use a regex to parse it from the first value. Then you can add that as a property to each marker, which you can check later. e.g. something like this:

var locations = [
    ['<h4>Meter# 11111111<h4>', 31.27045, 74.17811, 11111111],
    ['<h4>Meter# 22222222<h4>', 31.26972, 74.17855, 22222222],
    ['<h4>Meter# 33333333<h4>', 31.27081, 74.17964, 33333333],
    ['<h4>Meter# 44444444<h4>', 31.27007, 74.18037, 44444444],
    ['<h4>Meter# 55555555<h4>', 31.26956, 74.18123, 55555555]
];

// Add the markers and infowindows to the map
for (var i = 0; i < 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]
    });

Then when you submit the form, have a javascript event listener which gets the value entered by the user, and sees if you have a marker with that ID, e.g.

var serialNumber = // whatever the user entered

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