Если вы добавите четвертый именованный аргумент в функцию createMarker, вы можете назначить его как свойство самого маркера - что делает его довольно простым для доступа при щелчке маркера, поскольку вы можете использовать this
При этом я не вижу, чтобы вы фактически использовали аргументы name или address в самой функции, поэтому, если они снова будут назначены в качестве пользовательских свойств для маркера, вы можете получить к ним доступ в click событие с использованием this - ie: this.name et c
function createMarker( latlng, name, address, servicename ) {
var marker = new google.maps.Marker({
html:servicename,
map:map,
draggable:true,
animation:google.maps.Animation.DROP,
position:latlng,
name:name,
address:address,
icon: {
url:"{{ asset('img/new_map.png') }}"
}
});
google.maps.event.addListener(marker, 'click', function(e) {
infoWindow.setContent( this.html );
infoWindow.open( map, this );
}.bind( marker ));
markers.push( marker );
return marker;
}
После нашего краткого обсуждения и дальнейшего размышления о ваших требованиях, возможно, вы можете попробовать вот так. Поскольку вы (как вы заявили) уже добавили 4-й аргумент, мы можем добавить его в качестве пользовательского свойства для каждого маркера. В обработчике click мы можем перебрать массив markers и сравнить текущие атрибуты / свойства html маркеров (вы изначально ссылаетесь на html, следовательно, продолжаете делать это здесь) со свойством html любого маркера в массиве и, если они совпадают, добавьте это к выводу, который будет отображаться в информационном окне
function createMarker( latlng, name, address, servicename ) {
var marker = new google.maps.Marker({
html:servicename,
map:map,
draggable:true,
animation:google.maps.Animation.DROP,
position:latlng,
name:name,
address:address,
icon: {
url:"{{ asset('img/new_map.png') }}"
}
});
google.maps.event.addListener( marker, 'click', function(e) {
let data=[];
markers.forEach( mkr=>{
if( mkr.html==this.html ){
data.push( mkr.html )
}
});
infoWindow.setContent( data.join( '<br />' ) );
infoWindow.open( map, this );
}.bind( marker ));
markers.push( marker );
return marker;
}
Полностью рабочая демонстрация (apikey redacted), основанная на следующем XML файле. Функция ajax и ее обратный вызов просто эмулируют любой механизм, используемый в вашем коде для загрузки маркеров на карту, после загрузки они не используются снова - запрос маркеров выполняется исключительно на основе массива markers.
<?xml version="1.0"?>
<markers>
<marker servicename='a' name="Kinnettles" address="B9127, Angus DD8 1, UK" lat="56.61543329027024" lng="-2.9266123065796137"/>
<marker servicename='b' name="Nathro" address="1 Goynd Steading, Glenogil, Forfar, Angus DD8 3SW, UK" lat="56.793249595719956" lng="-2.8623101711273193"/>
<marker servicename='a' name="ArkHill" address="3 Dryburn Cottages, Glenogilvy, Forfar, Angus DD8 1UP, UK" lat="56.57065514278748" lng="-3.0511732892761074"/>
<marker servicename='b' name="DoddHill" address="4 Backmuir Rd, Duntrune, Tealing, Dundee, Angus DD4 0PT, UK" lat="56.54251020079966" lng="-2.9051538305053555"/>
<marker servicename='c' name="Govals" address="B9127, Forfar, Angus DD8, UK" lat="56.582320876071854" lng="-2.9509015874633633"/>
<marker servicename='d' name="Carsegownie" address="B9134, Forfar, Angus DD8, UK" lat="56.67951330362271" lng="-2.8062983350524746"/>
<marker servicename='a' name="Frawney" address="Kerton Farm, Forfar, Angus DD8, UK" lat="56.56806620951482" lng="-2.9501720266113125"/>
<marker servicename='a' name="NorthTarbrax" address="4 Nether Finlarg Farm Cottages, Forfar, Angus DD8 1XQ, UK" lat="56.57144715546598" lng="-2.92476614282225"/>
<marker servicename='e' name="TheCarrach" address="B951, Kirriemuir, Angus DD8, UK" lat="56.6938437674986" lng="-3.131382067657455"/>
<marker servicename='f' name="Glaxo" address="5 Meridian St, Montrose, Angus DD10 8DS, UK" lat="56.70431711148748" lng="-2.4660869436035"/>
</markers>
html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Collate attributes from multiple markers to display in single InfoWindow</title>
<style>
#map{width:800px;height:600px;}
</style>
<script>
var map;
var markers=[];
var infoWindow;
function ajax(callback){
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( this.status==200 && this.readyState==4 )callback(this.response)
}
xhr.open( 'GET', 'maps.xml', true );
xhr.send( null );
};
function loadmarkers(r){
let oParser=new DOMParser();
let oXML=oParser.parseFromString( r, 'application/xml' );
let nodes=oXML.documentElement.getElementsByTagName('marker');
for( let i=0; i < nodes.length; i++ ){
let latlng=new google.maps.LatLng( nodes[i].getAttribute('lat'),nodes[i].getAttribute('lng') );
let name=nodes[i].getAttribute('name');
let address=nodes[i].getAttribute('address');
let servicename=nodes[i].getAttribute('servicename');
createMarker(latlng,name,address,servicename)
}
};
function createMarker( latlng, name, address, servicename ) {
var marker = new google.maps.Marker({
html:servicename,
map:map,
draggable:true,
animation:google.maps.Animation.DROP,
position:latlng,
name:name,
address:address
});
google.maps.event.addListener( marker, 'click', function(e) {
/* query XML to find ALL nodes that have the same location */
let data=[
this.name,
this.address
];
markers.forEach( mkr=>{
if( mkr.html==this.html ) data.push( mkr.html );
});
infoWindow.setContent( data.join( '<br />' ) );
infoWindow.open( map, this );
}.bind( marker ));
markers.push( marker );
return marker;
};
function initMap(){
let centre=new google.maps.LatLng( 56.7, -2.8 );
let options = {
zoom: 10,
center: centre,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain','satellite','hybrid']
}
};
map=new google.maps.Map( document.getElementById('map'), options );
infoWindow=new google.maps.InfoWindow();
ajax( loadmarkers );
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=xxx&callback=initMap'></script>
</head>
<body>
<div id='map'></div>
</body>
</html>
