Как открыть информационное окно и закрыть другое информационное окно при нажатии маркера службы мест? [дубликат]

Как открыть информационное окно и закрыть другое информационное окно при нажатии маркера службы мест? [дубликат] ⇐ Jquery

1 сообщение • Страница 1 из 1

Гость

Как открыть информационное окно и закрыть другое информационное окно при нажатии маркера службы мест? [дубликат]

Цитата

Сообщение Гость » 14 мар 2024, 08:16

Я использую службу адресов для загрузки мест, расположенных рядом с местоположением по умолчанию. Проблема в том, что когда я нажимаю на маркер, открывается информационное окно, но не закрываются другие открытые информационные окна. Как открыть информационное окно и закрыть другие информационные окна?
Начальный маркер

Поиск поблизости: я хочу, чтобы при нажатии на маркер отображались другие открытые информационные окна. закрыто

Ниже приведены созданные мной коды

Код: Выделить всё

function initMap() {
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]
});

var marker = new google.maps.Marker({
position: defaultLocation,
map,
title: "Property Location",
});

marker.setMap(map);

}

$(document).ready(function() {
$('.nearby-search-btn').click(function() {
const type = $(this).data('type');
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off"  } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]
});

var marker = new google.maps.Marker({
position: defaultLocation,
map,
icon: {
url: "{{ asset('front/img/marker.png') }}",
scaledSize: new google.maps.Size(40, 40)
},
title: "Property Location",
});

var request = {
location: defaultLocation,
radius: '500',
type: [type]
};

var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length;  i++) {
var place = results[i];
createMarker(results[i]);
}
}
}

function createMarker(place) {
var neighborhoodMarker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
url: place.icon,
scaledSize: new google.maps.Size(25, 25)
},
label: ''
});

var ratingCount = place.rating;
var rating = '';
//add icon for rating count
if (ratingCount >= 4.5) {
rating = '[/i][i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 4) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3.5) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2.5) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1.5) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1) {
rating = '[i][/i]';
} else {
rating = '[i][/i]';
}

var contentString = `


` + place.name + `
` + place.vicinity + `

` + rating + `
` + place.user_ratings_total + ` Reviews



`;

var neighborhoodInfoWindow = new google.maps.InfoWindow({
content:  contentString
});

neighborhoodMarker.addListener('click', function() {
neighborhoodInfoWindow.open(map, neighborhoodMarker);
});

google.maps.event.addListener(map, 'click', function() {
neighborhoodInfoWindow.close();
});
}
});
});

Этот вопрос уже решен с помощью приведенного ниже кода.

Код: Выделить всё

var markers = [];
function initMap() {
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e"  } ] } ]
});

var marker = new google.maps.Marker({
position: defaultLocation,
map,
title: "Property Location",
});

marker.setMap(map);

}

$(document).ready(function() {
$('.nearby-search-btn').click(function() {
const type = $(this).data('type');
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]
});

var neighborhoodMarker = new google.maps.Marker({
position: defaultLocation,
map,
icon: {
url: "{{ asset('front/img/marker.png') }}",
scaledSize: new google.maps.Size(40, 40)
},
title: "Property Location",
});

var request = {
location: defaultLocation,
radius: '500',
type: [type]
};

var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length;  i++) {
var place = results[i];
createMarker(results[i], i);
}
}
}

function createMarker(place, id) {

var ratingCount = place.rating;
var rating = '';
//add icon for rating count
if (ratingCount >= 4.5) {
rating = '[i][/i][i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 4) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3.5) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2.5) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1.5) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1) {
rating = '[i][/i]';
} else {
rating = '[i][/i]';
}

var contentString = `


` + place.name + `
` + place.vicinity + `

` + rating + `
` + place.user_ratings_total + ` Reviews



`;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var neighborMarker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
url: place.icon,
scaledSize: new google.maps.Size(25, 25)
},
label: '',
title: place.name,
infowindow: infowindow
});

markers.push(neighborMarker);

google.maps.event.addListener(neighborMarker, 'click', function() {
hideAllInfoWindows(map);
this.infowindow.open(map, this);
});

}

function hideAllInfoWindows(map) {
markers.forEach(function(marker) {
marker.infowindow.close(map, marker);
});
}

});
});

Источник: https://stackoverflow.com/questions/780 ... -place-ser

1710393387

Гость


Я использую службу адресов для загрузки мест, расположенных рядом с местоположением по умолчанию. Проблема в том, что когда я нажимаю на маркер, открывается информационное окно, но не закрываются другие открытые информационные окна. Как открыть информационное окно и закрыть другие информационные окна?
[b]Начальный маркер[/b]
[i]
[b]Поиск поблизости[/b]: я хочу, чтобы при нажатии на маркер отображались другие открытые информационные окна.  закрыто
[img]https://i.stack.imgur.com/MACNW.png[/img]
Ниже приведены созданные мной коды
[code]
function initMap() {
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]
});

var marker = new google.maps.Marker({
position: defaultLocation,
map,
title: "Property Location",
});

marker.setMap(map);

}

$(document).ready(function() {
$('.nearby-search-btn').click(function() {
const type = $(this).data('type');
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off"  } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]
});

var marker = new google.maps.Marker({
position: defaultLocation,
map,
icon: {
url: "{{ asset('front/img/marker.png') }}",
scaledSize: new google.maps.Size(40, 40)
},
title: "Property Location",
});

var request = {
location: defaultLocation,
radius: '500',
type: [type]
};

var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length;  i++) {
var place = results[i];
createMarker(results[i]);
}
}
}

function createMarker(place) {
var neighborhoodMarker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
url: place.icon,
scaledSize: new google.maps.Size(25, 25)
},
label: ''
});

var ratingCount = place.rating;
var rating = '';
//add icon for rating count
if (ratingCount >= 4.5) {
rating = '[/i][i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 4) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3.5) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2.5) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1.5) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1) {
rating = '[i][/i]';
} else {
rating = '[i][/i]';
}

var contentString = `


` + place.name + `
` + place.vicinity + `

` + rating + `
` + place.user_ratings_total + ` Reviews



`;

var neighborhoodInfoWindow = new google.maps.InfoWindow({
content:  contentString
});

neighborhoodMarker.addListener('click', function() {
neighborhoodInfoWindow.open(map, neighborhoodMarker);
});

google.maps.event.addListener(map, 'click', function() {
neighborhoodInfoWindow.close();
});
}
});
});


[/code]
Этот вопрос уже решен с помощью приведенного ниже кода.
[code]
var markers = [];
function initMap() {
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e"  } ] } ]
});

var marker = new google.maps.Marker({
position: defaultLocation,
map,
title: "Property Location",
});

marker.setMap(map);

}

$(document).ready(function() {
$('.nearby-search-btn').click(function() {
const type = $(this).data('type');
const defaultLocation = { lat: {{ $property->latitude }}, lng: {{ $property->longitude }} };
const map = new google.maps.Map(document.getElementById('property-full-address-map'), {
center: defaultLocation,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
gestureHandling: "greedy",
styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#91D5E4" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]
});

var neighborhoodMarker = new google.maps.Marker({
position: defaultLocation,
map,
icon: {
url: "{{ asset('front/img/marker.png') }}",
scaledSize: new google.maps.Size(40, 40)
},
title: "Property Location",
});

var request = {
location: defaultLocation,
radius: '500',
type: [type]
};

var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length;  i++) {
var place = results[i];
createMarker(results[i], i);
}
}
}

function createMarker(place, id) {

var ratingCount = place.rating;
var rating = '';
//add icon for rating count
if (ratingCount >= 4.5) {
rating = '[i][/i][i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 4) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3.5) {
rating = '[i][/i][i][/i][i][/i][i][/i]';
} else if (ratingCount >= 3) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2.5) {
rating = '[i][/i][i][/i][i][/i]';
} else if (ratingCount >= 2) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1.5) {
rating = '[i][/i][i][/i]';
} else if (ratingCount >= 1) {
rating = '[i][/i]';
} else {
rating = '[i][/i]';
}

var contentString = `


` + place.name + `
` + place.vicinity + `

` + rating + `
` + place.user_ratings_total + ` Reviews



`;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var neighborMarker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
url: place.icon,
scaledSize: new google.maps.Size(25, 25)
},
label: '',
title: place.name,
infowindow: infowindow
});

markers.push(neighborMarker);

google.maps.event.addListener(neighborMarker, 'click', function() {
hideAllInfoWindows(map);
this.infowindow.open(map, this);
});

}

function hideAllInfoWindows(map) {
markers.forEach(function(marker) {
marker.infowindow.close(map, marker);
});
}

});
});


[/code] 

Источник: [url]https://stackoverflow.com/questions/78014526/how-to-open-info-window-and-close-another-info-window-when-marker-from-place-ser[/url]

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Быстрый ответ

Заголовок:

Имя пользователя:

Изменение регистра текста:

Смайлики

Ещё смайлики…

К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла:

Комментарий к файлу:

Имя файла	Комментарий к файлу	Размер	Статус

Похожие темы

Ответы

Просмотры

Последнее сообщение

Получите наиболее оптимальную комбинацию мест из списка мест с помощью алгоритма графа.

Последнее сообщение Anonymous « 10 июл 2024, 08:28
Добавлено в форуме Python

Anonymous » 10 июл 2024, 08:28 » в форуме Python

У нас есть сетевая ситуация, когда у него есть четыре узла — скажем, A, B, C и D. Проблема - A, B, C и D не исправлены, но имеют кучу возможностей.
Скажите A может иметь значения от A1, A2 до An.
То же самое для B — B1, B2, Bn .
То же самое касается...

0 Ответы

41 Просмотры

Последнее сообщение Anonymous
10 июл 2024, 08:28
Получите наиболее оптимальную комбинацию мест из списка мест с помощью алгоритма графа.

Последнее сообщение Anonymous « 10 июл 2024, 21:23
Добавлено в форуме Python

Anonymous » 10 июл 2024, 21:23 » в форуме Python

У нас есть сетевая ситуация, когда у него есть четыре узла — скажем, A, B, C и D. Проблема - A, B, C и D не исправлены, но имеют кучу возможностей.
Скажите A может иметь значения от A1, A2 до An.
То же самое для B — B1, B2, Bn .
То же самое касается...

0 Ответы

43 Просмотры

Последнее сообщение Anonymous
10 июл 2024, 21:23
Информационное окно, появляющееся при наведении курсора, портит макет сетки

Последнее сообщение Anonymous « 08 май 2024, 19:20
Добавлено в форуме CSS

Anonymous » 08 май 2024, 19:20 » в форуме CSS

У меня есть сетка компонентов с изображением и подписью, есть значок информации, где значок заголовка означает, что при наведении курсора мыши отображается информационное окно, но оно обрезано по краю карточки. Я пытался сделать видимым...

0 Ответы

28 Просмотры

Последнее сообщение Anonymous
08 май 2024, 19:20
Получение маркера из ClusterRenderer возвращает ноль для кластеризованного маркера

Последнее сообщение Anonymous « 27 сен 2024, 00:07
Добавлено в форуме Android

Anonymous » 27 сен 2024, 00:07 » в форуме Android

Я пытаюсь выбрать и отменить выбор маркера, используя данные кластера через средство визуализации кластера. Получаю ноль при получении маркера для кластеризованного маркера.
private fun setMarkerIcon(item: ClusterData) {
val icon =...

0 Ответы

35 Просмотры

Последнее сообщение Anonymous
27 сен 2024, 00:07
Как удалить всплывающее информационное окно для кода Python в VS Code

Последнее сообщение Anonymous « 17 май 2024, 18:44
Добавлено в форуме Python

Anonymous » 17 май 2024, 18:44 » в форуме Python

Я новичок в изучении Python и использую для этого VS Code. Все работает нормально, но когда я набираю код, у меня появляются всплывающие окна со странной информацией. Я понятия не имею, что это такое, и показанная информация не имеет для меня...

0 Ответы

49 Просмотры

Последнее сообщение Anonymous
17 май 2024, 18:44

Вернуться в «Jquery»