Google Maps V3: las ventanas de información no cambiar el tamaño a la información en forma
-
04-10-2019 - |
Pregunta
Problema:
Tengo un mapa API V3, con una ventana de contenido para cada marcador. El contenido de los tramos de ventana de información a través de múltiples líneas, pero la ventana de información no cambia de tamaño para adaptarse a todo, haciendo que aparezca un iframe como desplazamiento.
I han analizado el método setContent () en el API que de acuerdo con algunos de los puestos en la lista de correo V3 API debe corregir el problema. Sin embargo, parece que he estado poniendo en el lugar equivocado causando así el mapa no carga.
contenido InfoWindow se rellena de un campo en el locations_array.
código de mapa
Este es el código que estoy usando, menos el método setContent ().
<script src="/_global/assets/scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="javascript">
$(document).ready(function() {
//Google Maps
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(-26.66, 122.25),
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create an array to hold a series of generic objects
// Each one will represent an individual marker, and contain all the
// information we need for that marker. This way, we can reuse the data
// on the client-side in other scripts as well.
var locations_array = [
{latitude: -35.015672, longitude: 117.879639, title: "Albany", infoWindowContent: "<strong>Albany</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcAlbany\">Get office details</a>"},
{latitude: -33.351479, longitude: 115.666658, title: "Bunbury", infoWindowContent: "<strong>Bunbury</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcBunbury\">Get office details</a>"},
{latitude: -24.850919, longitude: 113.731984, title: "Carnarvon", infoWindowContent: "<strong>Carnarvon</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCarnarvon\">Get office details</a>"},
{latitude: -33.361363, longitude: 116.161534, title: "Collie", infoWindowContent: "<strong>Collie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCollie\">Get office details</a>"},
{latitude: -33.847418, longitude: 121.884107, title: "Esperance", infoWindowContent: "<strong>Esperance</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcEsperance\">Get office details</a>"},
{latitude: -31.795396, longitude: 115.88941, title: "Gnangara", infoWindowContent: "<strong>Gnangara</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcGnangara\">Get office details</a>"},
{latitude: -33.082093, longitude: 115.913902, title: "Harvey", infoWindowContent: "<strong>Harvey</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarvey\">Get office details</a>"},
{latitude: -33.082093, longitude: 115.913902, title: "Harvey Mill", infoWindowContent: "<strong>Harvey Mill</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarveyMill\">Get office details</a>"},
{latitude: -30.749071, longitude: 121.472324, title: "Kalgoorlie", infoWindowContent: "<strong>Kalgoorlie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKalgoorlie\">Get office details</a>"},
{latitude: -33.691176, longitude: 117.557189, title: "Katanning", infoWindowContent: "<strong>Katanning</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKatanning\">Get office details</a>"},
{latitude: -32.531789, longitude: 115.721341, title: "Mandurah", infoWindowContent: "<strong>Mandurah</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcMandurah\">Get office details</a>"},
{latitude: -34.250365, longitude: 116.147165, title: "Manjimup", infoWindowContent: "<strong>Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimup\">Get office details</a>"},
{latitude: -33.982459, longitude: 115.765361, title: "Nannup", infoWindowContent: "<strong>Nannup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcNannup\">Get office details</a>"},
{latitude: -31.953472, longitude: 115.914248, title: "Rivervale", infoWindowContent: "<strong>Rivervale</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcRivervale\">Get office details</a>"},
{latitude: -31.948893, longitude: 115.795029, title: "Shenton Park", infoWindowContent: "<strong>Shenton Park</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcShentonPark\">Get office details</a>"},
{latitude: -34.214112, longitude: 116.074472, title: "West Manjimup", infoWindowContent: "<strong>West Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimupWest\">Get office details</a>"},
];
// Now let's create some markers
for (var x = 0; x < locations_array.length; x++) {
// Grab an individual park object out of our array
var _park = locations_array[x];
var myLatlng = new google.maps.LatLng(locations_array[x].latitude,locations_array[x].longitude);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: locations_array[x].title,
icon: 'http://google-maps-icons.googlecode.com/files/park.png',
clickable: true,
infocontent: locations_array[x].infoWindowContent
});
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: this.infocontent
});
infowindow.open(map,this);
});
google.maps.event.addListener(marker, 'dblclick', function() {
map.setZoom(16);
});
}
});
</script>
Solución
Trate de poner las cadenas HTML de infoWindowContent en un div con una clase que tiene un conjunto de anchura a continuación, cambiar:
content: this.infocontent
ser
content: $(this.infocontent)[0]