0

I write page, which shows sellers of used items. There is many short info elements on the map with price, state of item and period of availability of seller. I want to reduce free space of info windows so more of them can fit the screen. I try new functionality in 6.5.0 of wicket-stuff gmap3 - "panels inside info windows", but no luck - picture shows result of css:

border : 1px solid black ;
margin : 0;
padding : 0;

How can i minimize free space of info winfo window and fit it to content?

P.S. It will be best if i can make clickable group of digits with pointer. But info window not clickable, so there is markers. Idea - user first make brood choice based on main properties displayed in info windows, then click his choice and complete info displayed somewhere else on the page.

P.P.S. Hmm, i have one more idea now - i don't need digit with state. I just can paint info in different colors(green = "like new", blue="used hard, but works", red = "garbage") :).

enter image description here

cynepnaxa
  • 1,024
  • 1
  • 14
  • 30

1 Answers1

1

Quick and dirty

var infowindow = new google.maps.InfoWindow({
  content: '<div id="iw_content"><a href="/" style="color:#f00">3434</a> <a href="/" style="color:#00f">4</a> <a href="/" style="color:#0f0">18-9</a></div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('iw_content');
  //* Get and set a class for the main content containers container
  el = el.parentNode.parentNode;
  el.setAttribute('class','iw_content_container_container');
  //* Get and set a class for the div containing the close window image
  closeEl = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  closeEl.setAttribute('class','closeInfoWindow');
  //* Get and set a class for the div containing the close and main content
  el = el.parentNode;
  el.setAttribute('class','closeInfoWindowContainer');
  //* Get and hide the troublesome background
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.style.display = "none";
  //* Get and hide the top image of the arrow
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.style.display = 'none';
  //* Get and hide the shadow (hiding commented out for now as not strictly requested)
  el = el.parentNode.parentNode;
  el = (el.previousElementSibling)?el.previousElementSibling.previousElementSibling:el.previousSibling.previousSibling;
  //el.style.display = 'none';
});

That might work for you to put some hooks in the code which you can then address with css

#iw_content{background:#fff}
.iw_content_container_container{height:auto!important;text-align:center}
.closeInfoWindow {top:22px!important;right:22px!important}
.closeInfoWindowContainer{position:absolute;top:52px;height:auto!important}

You may want to mess about with the .closeInfoWindowContainer top value as this is dependant on the amount of text. Basically tested with just that one line of yours.

I tried actually removing widths and heights in the code itself (so adding/changing within the javascript) but Maps have an annoying habbit of putting them back in again depending on state and position of cursor when loading.

...

Info Windows are clickable. They are just a normal div element in the page and can be treated as such. I have made the various values in your example hyperlinks to show this.

Sorry it isn't wicketstuff but I thought I should still post a solution.

Rafe
  • 793
  • 6
  • 15