Marker aktualisieren/neu laden ohne Google Map neu zu laden

Question

Ich verwende den folgenden Code, um Marker-Pins zu generieren. Es lädt perfekt, aber auf der linken Seite dieser Karte habe ich Filter. Wie lade ich die Markierungen neu, ohne die Karte neu zu laden? Dies hat einige Frustration verursacht, so dass jede Hilfe geschätzt werden würde.

Vielen Dank,

//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); 

    }); 
    } 

    }); 

    }); 

Answer 1

Hoffentlich beantwortet, was Sie fragen:

Wenn Sie einen Marker erstellen, können Sie die ‚Karte‘ Parameter verwenden, seine Karte zu setzen und es zeigen haben oben. Oder wenn Sie es an einen Filter binden möchten, können Sie den Map-Parameter ignorieren und später marker.setMap (map) 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 wollen ‚entfernen‘ und ‚add‘ Marker mit Ereignissen, können Sie marker.setMap (null) verwenden, um die Markierung und marker.setMap (Karte) zu entfernen, um sie wieder 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: Also, wenn Sie auf ‚Reload‘ den Marker wollen, könnten Sie durchqueren und Array von aktuell aktiven Markern, setzten ihre Karten, auf null und sie dann auf der Karte zurücksetzen .

Answer 2

Meine Seite lädt Karten in zwei Szenarien 1) zuerst laden 2) laufende Aktualisierung einer Google Map durch Ajax Anrufe.

Die folgende arbeitete für mich

<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> 

der Ereignisauslöser in meinem Fall eine Schaltfläche

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

Dann endlich das Javascript, das alles

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(); 
    }