Google지도를 다시로드하지 않고 마커를 업데이트/새로 고침

Question

마커 핀을 생성하는 데 다음 코드를 사용하고 있습니다. 그것은 완벽하게로드되지만이 맵의 왼쪽에는 필터가 있습니다. 지도를 다시로드하지 않고 마커를 다시로드하려면 어떻게해야합니까? 이것은 어떤 좌절감을 불러 일으키고 있으므로 어떤 도움을 주시면 감사하겠습니다. 당신이 마커를 만들 때

, 당신은 그것의지도를 설정하기 위해 '지도'매개 변수를 사용할 수 있습니다 그것에게 쇼를 :

많은 감사,

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

희망이 당신이 요구하는지에 답한다 쪽으로. 또는 필터에 묶으려는 경우지도 매개 변수를 무시하고 나중에 marker.setMap (map)을 사용할 수 있습니다. 당신은 '제거'및 이벤트에 마커를 '추가'하려면

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

, 당신은 다시 추가 그것에 마커와 marker.setMap (지도)를 제거하는 marker.setMap (널)를 사용할 수 있습니다.

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

업데이트 : 당신은 마커 '재 장전'을 원한다면 그래서, 당신은을 통해 통과하고 현재 활성화 된 마커의 배열 수, 널 (null), 다음지도에 그들을 다시 자신의지도를 설정 .

Answer 2

내 페이지로드 두 가지 시나리오에서지도로드 1) 첫 번째로드 2) 아약스 호출을 통한 Google지도의 지속적인 새로 고침.

다음은 마지막으로 그리고 내 경우에는 내가

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

위해 모든

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