How to change info window styles?

[GoogleCodeExporter]

I'd like to ask how to change info window styles?

 geoXml = new geoXML3.parser({
                    map: map,
                    singleInfoWindow: true,
                    zoom: true,
                    afterParse: useTheData
                });
                geoXml.parse('...');

Original issue reported on code.google.com by simonteu...@googlemail.com on 20 Oct 2011 at 3:10

[GoogleCodeExporter]

Original comment by geocodezip on 21 Oct 2011 at 1:42

• Changed state: Invalid

[GoogleCodeExporter]

Original comment by geocodezip on 21 Oct 2011 at 1:44

• Added labels: Priority-Low, Type-Other
• Removed labels: Priority-Medium, Type-Defect

[GoogleCodeExporter]

Ok. I'm really trying to combine The Info Box Script with the
geoxml3 Parser. Generally Google Maps JavaScript API V4 should
make custom info windows more easy to create.

    var geoXml = null;
var map = null;
var myLatLng = null;
            $(document).ready(function(){

                /* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

/* InfoBox extends GOverlay class from the Google Maps API
 */
InfoBox.prototype = new google.maps.OverlayView();

/* Creates the DIV representing this InfoBox
 */
InfoBox.prototype.remove = function() {
  if (this.div_) {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  }
};

/* Redraw the Bar based on the current projection and zoom level
 */
InfoBox.prototype.draw = function() {
  // Creates the element if it doesn't exist already.
  this.createElement();
  if (!this.div_) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our Bar
  var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
  if (!pixPosition) return;

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
  this.div_.style.height = this.height_ + "px";
  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
  this.div_.style.display = 'block';
};

/* Creates the DIV representing this InfoBox in the floatPane.  If the panes
 * object, retrieved by calling getPanes, is null, remove the element from the
 * DOM.  If the div exists, but its parent is not the floatPane, move the div
 * to the new pane.
 * Called from within draw.  Alternatively, this can be called specifically on
 * a panes_changed event.
 */
InfoBox.prototype.createElement = function() {
  var panes = this.getPanes();
  var div = this.div_;
  if (!div) {
    // This does not handle changing panes.  You can set the map to be null and
    // then reset the map to move the div.
    div = this.div_ = document.createElement("div");
    div.style.border = "0px none";
    div.style.position = "absolute";
    div.style.background = "url('http://gmaps-samples.googlecode.com/svn/trunk/images/blueinfowindow.gif')";
    div.style.width = this.width_ + "px";
    div.style.height = this.height_ + "px";
    var contentDiv = document.createElement("div");
    contentDiv.style.padding = "30px"
    contentDiv.innerHTML = "Hello World!";

    var topDiv = document.createElement("div");
    topDiv.style.textAlign = "right";
    var closeImg = document.createElement("img");
    closeImg.style.width = "32px";
    closeImg.style.height = "32px";
    closeImg.style.cursor = "pointer";
    closeImg.src = "http://gmaps-samples.googlecode.com/svn/trunk/images/closebigger.gif";
    topDiv.appendChild(closeImg);

    function removeInfoBox(ib) {
      return function() {
        ib.setMap(null);
      };
    }

    google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));

    div.appendChild(topDiv);
    div.appendChild(contentDiv);
    div.style.display = 'none';
    panes.floatPane.appendChild(div);
    this.panMap();
  } else if (div.parentNode != panes.floatPane) {
    // The panes have changed.  Move the div.
    div.parentNode.removeChild(div);
    panes.floatPane.appendChild(div);
  } else {
    // The panes have not changed, so no need to create or move the div.
  }
}

/* Pan the map to fit the InfoBox.
 */
InfoBox.prototype.panMap = function() {
  // if we go beyond map, pan map
  var map = this.map_;
  var bounds = map.getBounds();
  if (!bounds) return;

  // The position of the infowindow
  var position = this.latlng_;

  // The dimension of the infowindow
  var iwWidth = this.width_;
  var iwHeight = this.height_;

  // The offset position of the infowindow
  var iwOffsetX = this.offsetHorizontal_;
  var iwOffsetY = this.offsetVertical_;

  // Padding on the infowindow
  var padX = 40;
  var padY = 40;

  // The degrees per pixel
  var mapDiv = map.getDiv();
  var mapWidth = mapDiv.offsetWidth;
  var mapHeight = mapDiv.offsetHeight;
  var boundsSpan = bounds.toSpan();
  var longSpan = boundsSpan.lng();
  var latSpan = boundsSpan.lat();
  var degPixelX = longSpan / mapWidth;
  var degPixelY = latSpan / mapHeight;

  // The bounds of the map
  var mapWestLng = bounds.getSouthWest().lng();
  var mapEastLng = bounds.getNorthEast().lng();
  var mapNorthLat = bounds.getNorthEast().lat();
  var mapSouthLat = bounds.getSouthWest().lat();

  // The bounds of the infowindow
  var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
  var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
  var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
  var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;

  // calculate center shift
  var shiftLng =
      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
  var shiftLat =
      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);

  // The center of the map
  var center = map.getCenter();

  // The new map center
  var centerX = center.lng() - shiftLng;
  var centerY = center.lat() - shiftLat;

  // center the map to the new shifted center
  map.setCenter(new google.maps.LatLng(centerY, centerX));

  // Remove the listener after panning is complete.
  google.maps.event.removeListener(this.boundsChangedListener_);
  this.boundsChangedListener_ = null;
};

                // jQuery('#map_text').append("Hello");
                // var myLatlng = new google.maps.LatLng(39.397, -100.644);
                // var latlng = new google.maps.LatLng(44.797012, 7.382345);
                // googleplex 37.422104808,-122.0838851 zoom = 18
                myLatLng = new google.maps.LatLng(49.03437,8.68110);

                var myOptions = {
                    zoom: 15,
                    center: new google.maps.LatLng(49.03437,8.68110),
                    // zoom: 5,
                    // center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            geoXml = new geoXML3.parser({
                    map: map,
                    singleInfoWindow: true,
                    infoWindowOptions: infoBox,
                    zoom: true,
                    afterParse: useTheData
                });
                geoXml.parse('http://www.baeckerei-zickwolf.de/filialen/filialen-kml.html');
            });

            function useTheData(doc){
                // Geodata handling goes here, using JSON properties of the doc object
                //map.fitBounds(geoXml.doc[0].bounds);
                //alert("doc[0].bounds = "+doc[0].bounds);
                // map.setCenter(myLatLng);
                map.setZoom(14);
                for (var i = 0; i < doc[0].markers.length; i++) {
                    // console.log(doc[0].markers[i].title);

                    jQuery('#map_text').append(doc[0].markers[i].title + ', ');
                }
            };

   function hide_markers_kml(){

            geoXml.hideDocument();  // see geoxml3-modify: http://geocontext.org/pliki/2010/test-geoxml3/test2/geoxml3-modify.js

   }

   function unhide_markers_kml(){

            geoXml.showDocument();  // see geoxml3-modify: http://geocontext.org/pliki/2010/test-geoxml3/test2/geoxml3-modify.js

   }

    </script>

Original comment by simonteu...@googlemail.com on 21 Oct 2011 at 9:19

[GoogleCodeExporter]

I've tried to get this to work, but I've noticed that there's no definition for 
"infoBox" to be based into infoWindowOptions. I've tried the following: 

    var boxOptions = {};
    var infoBox = new InfoBox(myOptions);

    enc_map.parser = new geoXML3.parser({
        map: map,
                singleInfoWindow: true,
               infoWindowOptions: infoBox,
        pmParseFn: parsePlacemark,
        afterParse: useTheData
    });

But it doesn't seem to take at all -- I still get the default infoWindow. Is 
there something else that needs to be included? 

Original comment by ge...@sowrey.org on 1 Nov 2011 at 5:17

[GoogleCodeExporter]

It doesn't seem to work.

Did anybody ever achieved this?

Original comment by simonteu...@googlemail.com on 7 Nov 2011 at 12:26

[GoogleCodeExporter]

I m trying to do the same , but still not getting

Original comment by dineshsw...@gmail.com on 12 Jul 2012 at 1:24

[GoogleCodeExporter]

For those referencing 
http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js, the CSS class name 
that is used in the JavaScript and applied to the info window is 
'geoxml3_window'.

However on some examples the code in the HTML reads something like:

.infowindow * {font-family:Arial, Helvetica, sans-serif; font-size: 80%; 
margin: 10}

That's clearly a discrepancy. The style will work only if you change your CSS 
class name to 'geoxml3_infowindow'.

Alternatively use the JS file locally, look for the following lines and change 
the classname to whatever you like to use in conjunction with your HTML file.

var infoWindowOptions = geoXML3.combineOptions(parserOptions.infoWindowOptions, 
{
        content: '<div class="geoxml3_infowindow"><h3>' + placemark.name + 
                 '</h3><div>' + placemark.description + '</div></div>',
        pixelOffset: new google.maps.Size(0, 2)
      });

Original comment by killingh...@gmail.com on 15 Jul 2013 at 4:44

[GoogleCodeExporter]

Can you provide links to the examples that are incorrect?

Original comment by geocodezip on 15 Jul 2013 at 2:57

[GoogleCodeExporter]

Here's one: 

http://www.geocodezip.com/geoxml3_test/geoxml3_test_polygon.html

Possibly more on the landing page: http://www.geocodezip.com

Original comment by killingh...@gmail.com on 15 Jul 2013 at 11:33

[GoogleCodeExporter]

Fixed that one.  Please provide any others you know of.

Original comment by geocodezip on 16 Jul 2013 at 12:51