webentwicklung-frage-antwort-db.com.de

Marker aktualisieren/neu laden, ohne Google Map neu zu laden

Ich verwende den folgenden Code, um Markierungsstifte zu erzeugen. Es lädt perfekt, aber auf der linken Seite dieser Karte habe ich Filter. Wie lade ich die Marker neu, ohne die Karte neu zu laden? Dies hat einige Frustration verursacht, daher wäre jede Hilfe dankbar. 

Danke vielmals,

    //Google map results
        var contentStrings = [];
        var infowindow = new google.maps.InfoWindow();
        var mapinited = false;
        var map;
        var myOptions = {
          zoom: 11,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var currentinfobox;
        var myLatlng;
        var markersArray=[];
        var LatLngList = [];

$().ready(function() {

    //reinit search 
    if (window.location.hash) {
        submitForm(window.location.hash.replace('#',''));
    }
    else if (readCookie('sf')) {
            //submitForm(readCookie('sf'));
    }

    //init map
    $('#map_view').click(function() {
        if (mapinited) {
            return;
        } else {
            mapinited = true;
            initMap();
        }



    function initMap() {
            locate(["Ireland"],function(result) {
        map = new google.maps.Map(document.getElementById("search_map"), myOptions);
        myLatlng = new google.maps.LatLng(result.lat(),result.lng());

              var key =0;

               $.each(map_results, function(key, value){
        LatLngList[key] = new google.maps.LatLng(value.lat,value.long)
        contentStrings[key] =
                '<div id="ginfo_content" class="map-pop-up">'+
                  '<span class="content-top">&nbsp;</span>'+
                  '<div class="content-middle">'+
                    '<div class="map-filler">'+
                      '<a class="map-close" href="javascript:;" onclick="infowindow.close();" title="Close">x</a>'+
                      '<br class="clearfix">'+
                      '<div class="map-pop-up-left">'+
                        '<a href="profile.php?id='+ value.user_id +'"><div class="thumbnail"><img src="'+ value.image +'" width="64" height="64"></div></a>'+

                        '<a href="javascript:;" class="user-contact" onClick="to='+ value.user_id +';contact_showCaptcha();pop_up(\'pop-up-contact\');">Contact</a>'+

                      '</div>'+
                      '<div class="map-pop-up-right">'+
                        '<h2><a href="profile.php?id='+ value.user_id +'">'+ value.firstname +' '+value.lastname+',</a> '+ value.address +'</h2>'+
                        '<p>'+ stripslashes(value.about) +'</p>'+
                      '</div>'+
                      '<br class="clearfix">'+
                      '<div class="map-pop-up-footer"><a href="profile.php?id='+ value.user_id +'" class="view-profile">View Profile</a><span class="telephone">Telephone: '+ value.phone +'</span></div>'+
                    '</div>'+
                  '</div>'+
                  '<span class="content-bottom">&nbsp;</span>'+
                '</div>';
                 key++;
               });//end each

                map_results="";

        google.maps.event.addListener(infowindow, 'domready', function() {
            var infocontent = $('#ginfo_content').clone();
            var l = $('#ginfo_content').parent().parent().parent().addClass('original_popup').html('');
            $('.original_popup').append(infocontent).show();
            $('.original_popup').css('width','360px').css('height','230px').css('left','+=27px').css('top','+=65px');
        });

        var zoomChangeBoundsListener = google.maps.event.addListener(map, 'zoom_changed', function() {
            if (this.getZoom() > 14) // Change max/min zoom here
                this.setZoom(14);        
            google.maps.event.removeListener(zoomChangeBoundsListener);
        });
        var infoboxlistener = google.maps.event.addListener(map, 'zoom_changed', `enter code here`function() {
            infowindow.close();
        });
        loadMapInit(LatLngList,contentStrings);

    });
    }

    });

  });
18
steveIRL

Hoffentlich beantwortet das, was Sie fragen:

Wenn Sie eine Markierung erstellen, können Sie mit dem Parameter 'map' die Karte festlegen und anzeigen lassen. Wenn Sie es mit einem Filter verknüpfen möchten, können Sie den Kartenparameter ignorieren und marker.setMap (map) später verwenden.

// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"
});

Wenn Sie Marker mit Ereignissen "entfernen" und "hinzufügen" möchten, können Sie marker.setMap (null) verwenden, um den Marker zu entfernen, und marker.setMap (map), um ihn erneut hinzuzufügen.

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

// To remove the marker from the map
marker.setMap(null);

https://developers.google.com/maps/documentation/javascript/markers

Update: Wenn Sie also die Marken "neu laden" möchten, können Sie durch ein Array von derzeit aktiven Marken ziehen, ihre Karten auf Null setzen und sie auf der Karte zurücksetzen.

18
alex-phillips

Meine Seite lädt Karten in zwei Szenarien.

Folgendes hat für mich gearbeitet

<input type="hidden" id="lonDeg"><!--route lat to here via ajax call-->
<input type="hidden" id="latDeg"><!--route lon to here via ajax call-->

 <script>
  var map;
  function initMap() {
    // these two lines are the only variation from the native google 
    // API code.  They allow for dynamic updates of the lon/lat (below)
    var lonDeg = parseFloat($("#lonDeg").val());
    var latDeg = parseFloat($("#latDeg").val());

    var midp = {lat:latDeg, lng:lonDeg };

    map = new google.maps.Map(document.getElementById('map'), {
      scaleControl: true,
      center: midp,
      zoom: 10

    });
     var marker = new google.maps.Marker({map: map, position: midp});
        marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  }
    </script>

Das Ereignis löst in meinem Fall einen Button aus

<button id="getNextMap">Go to Next Map</button>

Dann endlich das Javascript, das alles möglich macht

    var qstring = 'myArgsToPass';
    var csv  = new Array();

    $.ajax({
        url: 'mapProfileGrabber.php',
        type: 'POST',
        data: {q:qstring},
        success: function(data) {
            csv = data.split(",");                        
            $("#lonDeg").val(csv[0]);
            $("#latDeg").val(csv[1]);

            initMap();
    }
0
Jason Smart

In meinem Fall verwende ich SVG-Symbole und ändere den strokeColor-Code, nachdem sich der Marker (und sein Symbol) auf der Karte befinden.

Damit die Karte die neue Farbe anzeigt, rufe ich einfach setMap erneut auf:

marker.setMap(map);

Ich finde es nicht nötig, es zuerst mit marker.setMap(null); zu entfernen.

Ich habe eine Ahnung, dass dies mit anderen Änderungen an der Markierung funktioniert, wie der URL des Symbols usw.

0
Dan H