La ventana predeterminada de Google Maps para un marcador de mapa es muy redonda. ¿Cómo creo una ventana de información personalizada con esquinas cuadradas?Google Maps: ¿Cómo crear una ventana de información personalizada?
No estoy seguro de cómo FWIX.com lo está haciendo específicamente, pero apostaría que están usando Custom Overlays.
¿Tiene un OVerlay personalizado todas las mismas propiedades que un marcador de mapa de google normal? Es decir, aún puedo hacer setIcon, setZIndex, etc. con una Superposición personalizada ** O ** ¿Tengo que volver a implementar toda esa funcionalidad? – SarahBeale
No, las superposiciones personalizadas solo permiten la funcionalidad básica de representación en el mapa, si desea setIcon, setZindex, etc. tendrá que implementarlas usted mismo. –
EDITAR Después de algo de caza alrededor, esto parece ser la mejor opción:
https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html
Se puede ver una versión personalizada de esta InfoBubble que he usado en Dive Seven, a website for online scuba dive logging. Se ve así:
Google provide a demo que muestra cómo implementar una ventana de información personalizada. Requiere una buena cantidad de código, pero parece ser bastante sencillo.
Hay algunos ejemplos más here. Sin embargo, definitivamente no se ven tan bonitos como el ejemplo en su captura de pantalla.
@TWilly, gracias. El proyecto se movió a GitHub. He actualizado las URL. –
Encontré InfoBox perfecto para un estilo avanzado.
Un cuadro de información se comporta como un google.maps.InfoWindow, pero soporta varias propiedades adicionales de estilo avanzado. Un InfoBox también se puede utilizar como una etiqueta de mapa. Un InfoBox también activa los mismos eventos como google.maps.InfoWindow.
Incluir http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js en su página
Tus enlaces están muertos. – Netsi1964
Usted puede incluso añadir su propia clase CSS en la ventana emergente contenedor/lienzo o qué es lo que quieres. Google Maps 3.7 actual tiene ventanas emergentes estilo elemento de lona que prepede contenedor emergente div en el código. Así en googlemaps 3.7 Usted puede entrar en el proceso de presentación de eventos de domready emergente como esto:
var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
if (this.content.parentNode.parentNode.previousElementSibling) {
this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
}
}
});
element.previousElementSibling no está presente en IE8- así que si quieres hacer que funcione en ella, follow this.
check the latest InfoWindow reference para eventos y más ..
encontré este más limpia en algunos casos.
Puede modificar toda la ventana de información usando jQuery solo ...
var popup = new google.maps.InfoWindow({
content:'<p id="hook">Hello World!</p>'
});
Aquí el <p> elemento actuará como un gancho en la ventana de información real. Una vez que el domready se dispare, el elemento se activará y se podrá acceder usando javascript/jquery, como $('#hook').parent().parent().parent().parent().
El código siguiente simplemente establece un borde de 2 píxeles alrededor de InfoWindow.
google.maps.event.addListener(popup, 'domready', function() {
var l = $('#hook').parent().parent().parent().siblings();
for (var i = 0; i < l.length; i++) {
if($(l[i]).css('z-index') == 'auto') {
$(l[i]).css('border-radius', '16px 16px 16px 16px');
$(l[i]).css('border', '2px solid red');
}
}
});
se puede hacer nada como el establecimiento de una nueva clase CSS o simplemente añadir un nuevo elemento.
jugar con los elementos para obtener lo que necesita ...
¡Este es un truco sucio que podría dejar de funcionar en cualquier momento! – billy
hack - seguro. genio - ¡absolutamente! –
Una identificación para un elemento que seguramente se repetirá en la página, no es una buena práctica. ID debe ser único en la página. –
El estilo de la ventana de información es bastante sencillo con vainilla JavaScript. Usé parte de la información de este hilo cuando escribía esto. También tomé en cuenta los posibles problemas con versiones anteriores de ie (aunque no lo he probado con ellos).
var infowindow = new google.maps.InfoWindow({
content: '<div id="gm_content">'+contentString+'</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
el.firstChild.setAttribute('class','closeInfoWindow');
el.firstChild.setAttribute('title','Close Info Window');
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.setAttribute('class','infoWindowContainer');
for(var i=0; i<11; i++){
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = 'none';
}
});
el código crea la ventana de información como de costumbre (sin necesidad de plugins, superposiciones personalizadas o código enorme), usando un div con un id para mantener el contenido. Esto le da un gancho al sistema que podemos utilizar para manipular los elementos correctos con una simple hoja de estilo externa.
Hay un par de piezas adicionales (que no son estrictamente necesarias) que manejan cosas como dar un gancho en el div con la imagen de la ventana de información cercana en él.
El ciclo final oculta todas las piezas de la flecha del puntero. Lo necesitaba yo mismo porque quería transparencia en la ventana de información y la flecha se interpuso en mi camino. Por supuesto, con el gancho, cambiar el código para reemplazar la imagen de la flecha con un png de su elección también debería ser bastante simple.
Si quieres cambiarlo a jquery (no tengo idea de por qué lo harías), entonces eso debería ser bastante simple.
normalmente no soy un desarrollador Javascript por lo que cualquier pensamientos, comentarios, críticas bienvenidos :)
No sé si lo has escuchado, pero hay cosas nuevas que se llaman "ingresar" y "espacio" que realmente crean espacio cuando escribes en una computadora. Por lo general, es útil cuando se escriben cosas como código para que tus ojos no se desanimen por tratar de leerlo :) – Chrillewoodz
A continuación pieza de código puede ayudar a salir.
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', (function(marker) {
return function() {
var content = address;
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker));
Aquí es un artículo < How to locate multiple addresses on google maps with perfect zoom> que me ayudó a alcanzar Este. Puede referirlo para trabajar en el enlace JS Fiddle y completar el ejemplo.
Puede usar el código a continuación para eliminar la ventana de información predeterminada del estilo. Después se puede utilizar código HTML para inforwindow:
var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
$('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
$('.gm-style-iw').prev().html(''); //remove style default inforwindows
});
remove style default inforwindows - la mejor solución para todos los SO por el momento – djdance
Aquí es una solución CSS puro basado en el ejemplo de ventana de información actual en Google:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
#map *{
overflow: visible;
}
#content{
display: block;
position: absolute;
bottom: -8px;
left: -20px;
background-color: white;
z-index: 10001;
}
Esta es una solución rápida que se funcionan bien para pequeñas ventanas de información. No se olvide de Answer si ayuda: P
Creo que la mejor respuesta que he llegado con está aquí: https://codepen.io/sentrathis96/pen/yJPZGx
no puedo tomar crédito por esto, esta forma de horquilla de otro codepen usuario fijar la dependencia de Google Maps para cargar realidad
nota Hacer de la llamada a:
InfoWindow() // constructor
he actualizado mi respuesta con un enlace a algo que se ve muy personalizable. Puedes elegir tu propio radio y otras configuraciones. –
[Vea esta respuesta] (http: // stackoverflow.com/a/7628522/881250) para otro ejemplo de creación de un InfoBoxes personalizado – Donamite