google map - как изменить google map infoWindow text

Я хочу получить и отобразить обновленный контент infoWindow, когда пользователь нажмет маркер. Проблема, с которой я сталкиваюсь, заключается в том, как вставить новый текст в соответствующее событие click. enter image description here google map - как изменить google map infoWindow text

Здесь есть соответствующий код.

// add listener on InfoWindow - close last infoWindow before opening new one 
google.maps.event.addListener(marker, 'click', function() { 

    //Close active window if exists - [one might expect this to be default behaviour no?]    
    if(activeInfoWindow != null) activeInfoWindow.close(); 

    // get latest text 
    var newText = fnGetNewTextForInfoWindow(); 

    // this is clearly wrong 
    infoWnd.setContent(newText); 

    // Open InfoWindow 
    infoWnd.open(map, marker, newText); 

    // Store new open InfoWindow in global variable 
    activeInfoWindow = infoWnd; 
});

и полный упрощенный пример ...

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 

<style> 
#map-canvas, #side-bar {   
    height: 500px; 
    width: 600px;   
} 

/* fix for unwanted scroll bar in InfoWindow */ 
.scrollFix { 
    line-height: 1.35; 
    overflow: hidden; 
    white-space: nowrap; 
} 

</style> 
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>   
<script src="../jquery/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 

// "use strict"; 

    // variable to hold a map 
    var map; 

    // variable to hold current active InfoWindow 
    var activeInfoWindow ;  

    // ------------------------------------------------------------------------------- // 
    // initialize function  
    // ------------------------------------------------------------------------------- // 
     function initialize() { 

     // map options - lots of options available here 
     var mapOptions = { 
      zoom : 10, 
      draggable: true, 
      center : new google.maps.LatLng(44.9600, -93.1000), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 

     // create map in div called map-canvas using map options defined above 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     // define two Google Map LatLng objects representing geographic points 
     var stPaul   = new google.maps.LatLng(44.9522,-93.0892); 
     var minneapolis  = new google.maps.LatLng(44.9792,-93.2662); 

     // place two markers 
     fnPlaceMarkers(stPaul,"St Paul"); 
     fnPlaceMarkers(minneapolis,"Minneapolis");   
     } 

    // ------------------------------------------------------------------------------- // 
    // create markers on the map 
    // ------------------------------------------------------------------------------- // 
    function fnPlaceMarkers(myLocation,myCityName){ 

     var marker = new google.maps.Marker({ 
      position : myLocation 
     }); 

     // Renders the marker on the specified map 
     marker.setMap(map); 

     // create an InfoWindow 
     var infoWnd = new google.maps.InfoWindow();   

     // add content to your InfoWindow 
     infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>'); 

// add listener on InfoWindow - close last infoWindow before opening new one 
google.maps.event.addListener(marker, 'click', function() { 

//Close active window if exists - [one might expect this to be default behaviour no?]    
if(activeInfoWindow != null) activeInfoWindow.close(); 

// get latest text 
var newText = fnGetNewTextForInfoWindow(); 
infoWnd.setContent(newText); 

// Open InfoWindow 
infoWnd.open(map, marker, newText); 

// Store new open InfoWindow in global variable 
activeInfoWindow = infoWnd; 
});        
    } 


    function fnGetNewTextForInfoWindow(){ 
     var newText = $('#idSomeNewText'); 
     return newText; 
    } 

    // ------------------------------------------------------------------------------- // 
    // initial load 
    // ------------------------------------------------------------------------------- //  
    google.maps.event.addDomListener(window, 'load', initialize); 


</script> 
<a href="../index.php">BACK</a><br> 
<br/> 

<h3></h3> 
<ul> 
    <li>Enter some text in text box and click market to update text in InfoWindow, then show InfoWindow</li>   
</ul> 

Enter Some text to insert in marker: 
    <input id='idSomeNewText' type="text" name="firstname" value="test value"> 
<br/> <br/> 
    <div id="map-canvas"></div> 

<br/> 
<br/> 

</body> 
</html>

источник

2015-03-06 Mustapha George

Карт Google setContent функция() делает это. Например:

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

    //Close active window if exists 
    if(activeInfoWindow) { 
     activeInfoWindow.close(); 
    } else {   
     activeInfoWindow = new google.maps.InfoWindow(); 
    } 

    // get latest text 
    var newText = fnGetNewTextForInfoWindow(); 

    // Update InfoWindow content 
    activeInfoWindow.setContent(newText); 

    // Open InfoWindow 
    activeInfoWindow.open(map, marker); 
});

Вы можете повторно использовать инфо-окно так часто, как вам нравится. Просто измените содержание и поместите его на соответствующий маркер.

источник

2015-03-06 16:55:27 bobdye

спасибо. Хороший толчок в правильном направлении. –

полный рабочий ответ ...

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 

<style> 
#map-canvas, #side-bar {   
    height: 500px; 
    width: 600px;   
} 

/* fix for unwanted scroll bar in InfoWindow */ 
.scrollFix { 
    line-height: 1.35; 
    overflow: hidden; 
    white-space: nowrap; 
} 

</style> 
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>   
<script src="../jquery/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 

// "use strict"; 

    // variable to hold a map 
    var map; 

    // variable to hold current active InfoWindow 
    var activeInfoWindow ;  

    // arrays to hold copies of the markers and html used by the side_bar   
    var gmarkers = []; 


    // ------------------------------------------------------------------------------- // 
    // initialize function  
    // ------------------------------------------------------------------------------- // 
     function initialize() { 

     // map options - lots of options available here 
     var mapOptions = { 
      zoom : 10, 
      draggable: true, 
      center : new google.maps.LatLng(44.9600, -93.1000), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 

     // create map in div called map-canvas using map options defined above 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     // define two Google Map LatLng objects representing geographic points 
     var stPaul   = new google.maps.LatLng(44.9522,-93.0892); 
     var minneapolis  = new google.maps.LatLng(44.9792,-93.2662); 

     // place two markers 
     fnPlaceMarkers(stPaul,"St Paul"); 
     fnPlaceMarkers(minneapolis,"Minneapolis");   


     //console.log(gmarkers); 
     } 

    // ------------------------------------------------------------------------------- // 
    // create markers on the map 
    // ------------------------------------------------------------------------------- // 
    function fnPlaceMarkers(myLocation,myCityName){ 

     var marker = new google.maps.Marker({ 
      position : myLocation 
     }); 

     // Renders the marker on the specified map 
     marker.setMap(map); 

     // save the info we need to use later 
     gmarkers.push(marker); 

     // create an InfoWindow 
     var infoWnd = new google.maps.InfoWindow();   

     // add content to your InfoWindow 
     infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>'); 

     // add listener on InfoWindow - close last infoWindow before opening new one 
     google.maps.event.addListener(marker, 'click', function() { 

     //Close previous active window if exists - [one might expect this to be default behaviour no?]    
     if(activeInfoWindow != null) activeInfoWindow.close(); 

     //Close previous active window if exists 
     // if(activeInfoWindow) { 
      // activeInfoWindow.close(); 
     // } else {   
      // activeInfoWindow = new google.maps.InfoWindow(); 
     // } 

     // get latest text 
     var newText = fnGetNewTextForInfoWindow(); 

     // Update InfoWindow content 
     infoWnd.setContent(newText); 

     // Open InfoWindow 
     infoWnd.open(map, marker); 

     // Open InfoWindow  
     //infoWnd.open(map, marker, newText); 

     // Store new open InfoWindow in global variable 
      activeInfoWindow = infoWnd; 
     });        
    } 

    function fnGetNewTextForInfoWindow(){ 
     var newText = $('#idSomeNewText').val(); 
     return newText; 
    } 

    // ------------------------------------------------------------------------------- // 
    // initial load 
    // ------------------------------------------------------------------------------- //  
    google.maps.event.addDomListener(window, 'load', initialize); 


</script> 
<a href="../index.php">BACK</a><br> 
<br/> 

<h3>Update InfoWindow contents when marker is clicked</h3> 
<p>This is useful when content of infoWindow changes frequently</p> 

Enter Some text to insert in marker: 
    <input id='idSomeNewText' type="text" name="anyName" value="test value"> 
<br/> <br/> 
    <div id="map-canvas"></div> 

<br/> 
<br/> 

</body> 
</html>

источник

2015-03-06 17:18:24

google map - как изменить google map infoWindow text

ответ

Смежные вопросы