How to clear the google map markers before refreshing with a new map?

Question

Could someone be kind enough to share how I can clear the markers in google map before refreshing it with a new set of markers?

In my map, I'm adding markers from an array that contains name, lat and long. The name can be picked from a drop down menu, and then all the markers for that name are added to the page.

Prtoject : Asp.Net Mvc Link image: https://i.hizliresim.com/V927Py.jpg

When the user adds markers, the previous set of markers remain. I'd like to remove any existing markers before adding the new set.

After reading the documentation, I tried this:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model List<Project_Map.Models.KONUM>

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Complex Marker Icons</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <style>
        #map_wrapper {
            height: 700px;
        }

        #map_canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <div id="map_wrapper">
        <div class="mapping" id="map_canvas">
            &nbsp;
        </div>
    </div>

    <div id="map"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script>
        jQuery(function ($) {
            var script = document.createElement('script');
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBT56XlfxnK2OB4K93vWdrZci_CKjZyQOM&callback=initMap";
            document.body.appendChild(script);
        });
    </script>

    <!-- Google Maps Kodu -->
    <script type="text/javascript">

            var contentString = '<div id="content">' +
                '<div id="siteNotice">' +
                '<img src="#IMG_SRC#" />' +
                '</div>' +
                //'<h2 id="firstHeading" class="firstHeading">#PERSONEL#</h2>' +
                '<div id="bodyContent">' +
                '<b>Mesafe: </b>#MESAFE# Km<br />' +
                '<b>Tarih: </b> #TARIH#' +
                '</p>' +
                '</div>' +
                '</div>';

            $(document).ready(function () {
                initMap();
            });


            function initMap() {

                var mapCenter = { lat: 39.684536, lng: 35.337094 };


                var map = new google.maps.Map(document.getElementById('map_wrapper'), {
                    zoom: 6,// haritanın yakınlık derecesi
                    center: mapCenter, // haritanın merkezi
                    mapTypeId: google.maps.MapTypeId.HYBRID
                });


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

                setInterval(function () {
                   $.ajax({
                      url: '@Url.Action("GetMapLocations", "Konum")',
                      type: "POST",
                      success: function (data) {

                             var json = JSON.parse(data);
                             for (var i = 0; i < json.length; i++) {
                                 var position = {
                                     lat: parseFloat(json[i].lat.replace(',', '.')),
                                     lng: parseFloat(json[i].lng.replace(',', '.'))
                                 };
                                 var marker = new google.maps.Marker({
                                     position: position,
                                     animation: google.maps.Animation.BOUNCE,
                                     map: map,

                                 });
                                 // infoWindow içeriğini replace et
                                 var cs = contentString;
                                 cs = cs.replace("#PERSONEL#", json[i].name);
                                 cs = cs.replace("#MESAFE#", json[i].mesafe);
                                 cs = cs.replace("#TARIH#", json[i].tarih);
                                 cs = cs.replace("#IMG_SRC#", json[i].img);

                                 google.maps.event.addListener(marker, 'click', (function (marker, cs, infoWindow) {
                                     return function () {
                                         infoWindow.setContent(cs);
                                         infoWindow.open(map, this);
                                         passive: true;
                                     };
                                 })(marker, cs, infoWindow));
                             };

                      },
                           error: function (data) { alert("Malesef Sunucunuza Ulaşamıyoruz. Lütfen Tekrar Deneyiniz..."); },
                   });
                }, 5000);
            };
    </script>
</body>
</html>

score 0 · Accepted Answer · answered Nov 21 '18 at 12:41

0

You have to set up an array, where you can store the added marker

var gmarkers = [];

If you add a marker you have to store the marker object in the array.

gmarkers.push(marker);

If you want to remove these markers you can use something like:

function removeMarker() {
if (gmarkers.length > 0) {
    for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i] != null) {
            gmarkers[i].setMap(null);
        }
    }
}
gmarkers = [];
}

answered Nov 21 '18 at 12:41

ReFran

897
8
14

Thank you for your answer. So how do I edit this code? – ONUR YILDIZ Nov 21 '18 at 12:45
" .So how do I edit this code ". I don't understand. Do you mean "edit" my code? You can use it direct. – ReFran Nov 21 '18 at 13:03
yes, please.... – ONUR YILDIZ Nov 21 '18 at 13:10

How to clear the google map markers before refreshing with a new map?

1 Answers1