Google maps api v3: infowindow contents are misplaced

Question

I am using geoxml3 to parse a kml file of points. On click of the marker an info window opens with some description. The problem is that the information is being displayed misplaced and also two links are added in the info window which I want to remove.

Any ideas how I can remove the links and also put the information placed correctly?

This is a screen shot of the info window:

enter code here

The following is the code I am using:

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer();

    var mapOptions = {
        center: new google.maps.LatLng(35.898737028438, 14.5133403246687),
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    directionsDisplay.setMap(map);

    elevator = new google.maps.ElevationService();

    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);     
    });

    google.maps.event.addListener(map, 'click', getElevation);

}

function displayKml() {
    initialize();
    parser = new geoXML3.parser({
        map: map,
        processStyles: true,
        createMarker: addMyMarker,
        createOverlay: addMyOverlay
    });          
    parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value); 
}

function addMyMarker(placemark) {
   parser.createMarker(placemark);
}

function addMyOverlay(groundOverlay) {
   parser.createOverlay(groundOverlay);
}

The kml file structure is as follows:

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>route</name>
    <Placemark>
      <name>210</name>
      <description>St james cavalier,Exhibitions centre</description>
      <Point>
        <coordinates>14.5107742,35.8955498</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>

We really need to see what the KML file looks like since KML placemark descriptions can contain HTML - and that's probably where the issue originates. — Chad Killingsworth, Mar 18 '13 at 13:28
Looks like a css problem to me. Which version of geoxml3 are you using? Looks like that might be the kmz branch, I believe that attempts to add directions. — geocodezip, Mar 18 '13 at 13:42
The kmz branch of geoxml3 adds the "From"/"To" directions links for "Point" placemerks. — geocodezip, Mar 18 '13 at 14:08

geocodezip · Accepted Answer · 2013-03-18T17:30:04.800

1

Your sample KML works fine with my test pages:

polys branch: http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml

kmz branch: http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmztest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/SO_IT_info_kmlPt.xml

Must be your css (which you haven't provided) or something else in your environment.

edited Mar 18 '13 at 17:30

answered Mar 18 '13 at 16:51

geocodezip

158,664
13
220
245

as css I only have on the map in order to locate it in my web app. It is the following: .positionMap { float: right; top: 100px; height: 645px; width: 1020px; } @geocodezip – IT_info Mar 18 '13 at 17:02
You do see that the links I provided don't show the problem, correct? If that is the case the problem is something in your environment. Please provide a link or a jsfiddle that allows the problem to be reproduced. – geocodezip Mar 18 '13 at 17:13
Also how am i able to add button in the info window which on click I will get the information in that particular info window? @geocodezip – IT_info Mar 18 '13 at 17:21
I don't understand what you are asking, what information about the marker is in the infowindow that you need to get? What do you want to do with that information when the button is clicked? This is almost certainly a separate question, not material for the comments on this one. – geocodezip Mar 18 '13 at 17:27
Because apart from aligning properly the information, I need to do a button in the info window like the 'To Here' which onclick i will get the description of that particular placemark and show it in a textbox as a destination @geocodezip – IT_info Mar 18 '13 at 17:30
I am still stuggling with the info window to put everyting in order. I also put the kml file hosted to be able access it through google.map.kmlLayer(....), and it worked fine from here. It does not work when I parse the file from the geoxml. I have made also everything hidden to check if it is something from the css, BUT the problem still persists. I know that in yours it worked, BUT please do you have any idea how can I debug it? @geocodezip – IT_info Mar 19 '13 at 08:35
I have just solved it. I had some css in my main stylesheet which was causing the problem. Thanks a lot for your feedback. – IT_info Mar 19 '13 at 08:37

Google maps api v3: infowindow contents are misplaced

1 Answers1