w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Google maps, clear markers
  1. var mapMarkers = []; Declare it global
  2. push markers to mapMarkers array.
  3. In ajax callback, loop all markers in mapMarkers array and set their map property to null.
  4. clear the mapMarkers array.

    var mapMarkers = []; //STEP 1 Global, so that it can be accessed
    from ajax success callback
    
    function initialize() {
    
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
    
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
    map.setTilt(45);
    
    // Multiple Markers
    var markers = [
    
        <?php foreach ($records as $value): ?>
            <?php $records = (array)$records; ?>
            ['<?php echo $value->name ?>', <?php echo
    $value->coords ?>], 
        <?php endforeach; ?>
    
    ];
    
    // Info Window Content
    var infoWindowContent = [
    
        <?php foreach ($records as $value): ?>
            <?php $records = (array)$records; ?>
            ['<div style="height: 80px; white-space: nowrap;"
    class="info_content"><b><?php echo $value->name;
    ?></b><br/><br/><?php echo $value->address;
    ?><br/>T: <?php echo $value->phone; ?></div>'], 
        <?php endforeach; ?>
    
    ];
    
    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    
    
    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
    
        mapMarkers.push(marker); //STEP 2
    
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
    
    // Override our map zoom level once our fitBounds function runs (Make sure
    it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed',
    function(event) {
        this.setZoom(9);
        google.maps.event.removeListener(boundsListener);
    });
    
    }
    
    
    //AJAX AUTOCOMPLETE PLUGIN
    var a = $('#searchMap2').autocomplete({
        serviceUrl: '/public/index.php/prodajna_mesta/search', 
        minChars: 1,
        delimiter: /(,|;)s*/, // regex or character
        //params: { country:'Yes' }, //aditional parameters
        noCache: false, //default is false, set to true to disable caching
        // callback function:
        onSelect: function(suggestion) {
    
            $.ajax({
                url: "/public/index.php/prodajna_mesta/coords",
                context: document.body,
                data: { coords: suggestion.data }
            }).done(function(data) {
    
                    //CLEAR MY MARKERS HERE
                    //STEP 3
    
                    var len = mapMarkers.length;
                    for(var i=0; i<len; i++){
                      mapMarkers[i].setMap(null);
                   }
                   mapMarkers = []; //Empty the array
    
    
                });
            }
        });  
    });
    




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.