Google Maps API v3 - 如何更新标记的InfoWindow

时间:2017-10-05 10:00:43

标签: google-maps google-maps-api-3 google-maps-markers

是否可以定位特定标记的InfoWindow来更新它?

单击标记时,将打开显示名称和地址的InfoWindow。它还将Lat和Long发送到PHP脚本,以便从地图中的div中的数据库中返回有关此Marker的更多详细信息。

我希望能够使用这个off-map div更新名称和地址,这没有问题 - 我仍然坚持如何定位特定Marker的InfoWindow以使用新的名称和地址更新它。 / p>

我已经为每个Marker添加了一个id,但是我不确定如何使用它(或者如果可能的话)使用该id定位Marker并从我发送信息的其他函数更新其InfoWindow数据库中。

	    var map;
	    var map_center = {lat: <?=$map['lat']?>, lng: <?=$map['lng']?>};
	    var markers = [];
	    var infowindow = new google.maps.InfoWindow();

	    map_initialize(); // initialize google map
	    
	    //############### Google Map Initialize ##############
	    function map_initialize() {
        var googleMapOptions = { 
          center: map_center, // map center
          zoom: 15, //zoom level, 0 = earth view to higher value
          panControl: true, //enable pan Control
          zoomControl: true, //enable zoom control
          zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL //zoom control size
        },
        	scaleControl: true, // enable scale control
          mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };
    
        map = new google.maps.Map(document.getElementById("map"), googleMapOptions);         
        
        $.getJSON("<?=$urlpath?>map_process.php", function(data) {
        	
				   $.each(data, function(key, val) {
						var point     	= new google.maps.LatLng(parseFloat(val['lat']),parseFloat(val['lng']));
						var name      	= val['name'];
						var address   	= '<p>'+ val['address'] +'</p>';
						var properties	= val['properties'];
					var id					= val['id'];
					
					create_marker(point, name, address, false, false, "/images/pin_green.png", properties, id);
			   })
			});
                            
    }

		//############### Function create_marker ##############
		
		
		function create_marker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, iconPath, properties, id) {           
	    
	    var this_id = 'marker_' + id;
		    
		    //new marker
		    var marker = new google.maps.Marker({
		    	id: this_id,
	        position: MapPos,
	        map: map,
	        draggable: DragAble,
	        animation: google.maps.Animation.DROP,
	        title: MapTitle,
	        icon: iconPath,
	        properties: properties
		    });
		    
		    //Content structure of info Window for the Markers
		    var contentString = $('<div class="marker-info-win">'+
		    '<div class="marker-inner-win"><span class="info-content">'+
		    '<h1 class="marker-heading">'+MapTitle+'</h1>'+
		    MapDesc+ 
		    '</span>'+
		    '</div></div>');    

			  google.maps.event.addListener(marker, 'click', function(event) {

			    infowindow.setContent(contentString[0]);
			    infowindow.open(map, marker);
			    
			    //############### Send latlng to right panel ##############
			    
		    	var mLatLang = marker.getPosition().toUrlValue(); //get marker position
		    	showRightPanel(mLatLang);
			    
			  });
						    
				markers.push(marker);
			}		




			function showRightPanel(mLatLang) { //function that will add markers on button click
			
	      var myData = {latlang : mLatLang}; //post variables
	      $.ajax({
	        type: "POST",
	        url: "<?=$urlpath?>map_show_panel.php",
	        data: myData,
	        success:function(data){
	        	$('#marker_result').html(data);
	        },
	        error:function (xhr, ajaxOptions, thrownError){
	        	alert(thrownError); //throw any errors
	        }
	      });
			
			}

1 个答案:

答案 0 :(得分:0)

假设infoWindow' is your infoWindow object you can change the content of an infoWindow if you can access (you have visibility of the infoWindow object) using setContent()`例如:

  infoWindow.setContent('your new content');