Как показать белый всплывающий флажок на пользовательской карте Google?

В настоящее время у меня есть множество мест для пользовательской карты, над которой я работаю. Я пытался, но не могу понять, как добавить всплывающее окно «щелчок» над маркером. Я хочу, чтобы в белом поле отображалось имя и у него есть опция, чтобы человек мог выбрать «получить указания здесь». Кто-нибудь знает, как я могу добиться этого с помощью более одного маркера?Как показать белый всплывающий флажок на пользовательской карте Google?

<!DOCTYPE html> 
<head> 

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 50% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
    var map; 
    var marker 
    function initialize() { 
    var latlng = new google.maps.LatLng(42.098687,-75.917974); 
var restaurants = new Array(); 
restaurants = [ 
     new google.maps.LatLng(42.898687,-75.917974), 
     new google.maps.LatLng(42.698687,-73.917974), 
     new google.maps.LatLng(42.198687,-75.917974), 
     new google.maps.LatLng(41.098687,-75.917974) 
     ]; 
    var myOptions = { 
     zoom: 3, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    var i = 0; 
for (i <0; i < restaurants.length;i++){ 
    var marker = new google.maps.Marker({ 
     position: restaurants[i], 
    map:map, 
     title:"Testing!" 
    }); 
    popupDirections(marker); 
    } 
} 
function popupDirections(marker) { 
    var infowindow = new google.maps.InfoWindow(
     { content: "tests: " 
     }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map,marker); 
    }); 
} 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:50%; height:50%"></div> 
</body> 
</html>

источник

2010-09-10 Kevin

Всплывающее окно, о котором вы говорите, называется информационным окном на языке карты google.

GEvent.addListener(marker, "click", function() { 
marker.openInfoWindowHtml("your contents"); 
});

Приведенный выше код связывает событие клика с маркером и открывает информационное окно с указанным текстом. здесь маркер является объектом-маркером.

Надеюсь, это поможет.

источник

2010-09-10 12:51:33

Способ сделать это - создать одно глобальное информационное окно, а затем повторно использовать его снова и снова, таким образом, инфоустановка просто перемещается на каждый маркер, а содержимое информационного окна может быть изменено с помощью метода setContent. Прочитайте here и есть демо-версия Google, доступная с сайта ссылки api. У меня была та же проблема, когда я делал карту для моего сайта,

Следующий код должен работать:

<script type="text/javascript"> 
var map; 
var marker; 
var infowindow; //Global infowindow created 
function initialize() { 
    var latlng = new google.maps.LatLng(42.098687,-75.917974); 
    var restaurants = new Array(); 
    restaurants = [ 
     new google.maps.LatLng(42.898687,-75.917974), 
     new google.maps.LatLng(42.698687,-73.917974), 
     new google.maps.LatLng(42.198687,-75.917974), 
     new google.maps.LatLng(41.098687,-75.917974) 
     ]; 
    var myOptions = { 
     zoom: 3, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    infowindow = new google.maps.InfoWindow({ //infowindow options set 
       maxWidth: 355 
    }); 

    var i = 0; 
    for (i <0; i < restaurants.length;i++){ 
      marker = new google.maps.Marker({ 
         position: restaurants[i], 
         map:map, 
         title:"Testing!" 
       }); 
      popupDirections(marker); 
     } 
} 

function popupDirections(marker) { 
    //this function created listener listens for click on a marker 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: " 
    infowindow.open(map,marker); //then opens the infowindow at the marker 
    }); 
} 
</script>

Если вы хотите отдельный контент для каждого маркера (который я предполагаю, что вы будете) вы можете передать некоторое содержимое в функцию popupDirections(), модифицированную строкой для содержимого «html»:

function popupDirections(marker, html) { 
    //this function created listener listens for click on a marker 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: " 
    infowindow.open(map,marker); //then opens the infowindow at the marker 
    }); 
}

источник

2010-09-10 18:48:43 adustduke

Как показать белый всплывающий флажок на пользовательской карте Google?

ответ

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