style personalizar open multiple infowindows google close automatically all javascript google-maps

javascript - personalizar - Diseño de InfoWindow con Google Maps API



multiple infowindows google maps (3)

Esta pregunta ya tiene una respuesta aquí:

Actualmente estoy trabajando con Google Maps, y todo funciona bien por ahora. Pero quiero cambiar el estilo de la ventana de información. He estado investigando, pero aún no he encontrado nada útil que me ayude a entender InfoWindow (ni siquiera la documentación de la API).

Asi que; ¿Cómo cambio el estilo de los colores, el fondo, los bordes, etc. del cuadro de InfoWindow en mi mapa?

Gracias por adelantado.

Aquí está mi código:

<!DOCTYPE html> <head> <title>Google Maps Example</title> <script src=''http://code.jquery.com/jquery.min.js'' type=''text/javascript''></script> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 font-family: Helvetica;} #map_canvas { height: 100% } .InfoWindow { background: #000; } </style> </head> <body> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var infowindow = null; $(document).ready(function () { initialize(); }); function initialize() { var centerMap = new google.maps.LatLng(59.9149, 10.72974); var myOptions = { zoom: 14, center: centerMap, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); setMarkers(map, sites); infowindow = new google.maps.InfoWindow({ content: "loading..." }); } var sites = [ [''Mount Evans'', 59.934615,10.743392, 4, ''<div class="InfoWindow"><b>This is Mount Evans.</b></div>''], [''Irving Homestead'', 40.315939, -105.440630, 2, ''This is the Irving Homestead.''], [''Badlands National Park'', 43.785890, -101.90175, 1, ''This is Badlands National Park''], [''Flatirons in the Spring'', 39.99948, -105.28370, 3, ''These are the Flatirons in the spring.''] ]; var image = new google.maps.MarkerImage( ''http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/bar.png'', new google.maps.Size(30,37) ); function setMarkers(map, markers) { for (var i = 0; i < markers.length; i++) { var sites = markers[i]; var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); var marker = new google.maps.Marker({ position: siteLatLng, map: map, title: sites[0], zIndex: sites[3], html: sites[4], icon: image }); var contentString = "Some content"; google.maps.event.addListener(marker, "click", function () { infowindow.setContent(this.html); infowindow.open(map, this); }); } } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

Edición: No parece que sea posible diseñar InfoWindow (solo la entrada). Sin embargo, Infobox hace esto posible.



Puedes cambiarlo con el script java de la siguiente manera

var contentString = ''<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #ed1e79;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>"You feild"</b></strong></div><div style="clear:both;height:0px;"><div style="float:left;width:90%;padding:5px 10px;border:1px solid #ccc;border-top:none;border-radius:0px 0px 5px 5px;"><div style="float:left;color:#666;font-size:18px;font-weight:bold;margin:5px 0px;"> <div style="padding: 0px;">]]..product_list[i].category..[[</div></div><div style="clear:both;height:0px;"></div><div style="float:left;line-height:18px;color:#666;font-size:13px;">"You feild"</div><div style="clear:both;height:0px;"></div><form action=/"navigat:"You feild"/"><input type=/"submit/"/ style=/"background:#7e7e7e;float:right;color:#FFF;padding:5px 7px;font-size:10px;font-weight:bold;border:none;margin:5px 0px; border-radius:0px !important;/" value=/"More Info/" ></form></div></div>''; var infowindow = new google.maps.InfoWindow({content:contentString});


use las clases .gm-style .gm-style-iw para estilizar el texto, por ejemplo:

.gm-style .gm-style-iw { font-size: 16px; font-weight: bold; font-family: sans-serif; text-transform: uppercase; }