How to override target=_blank in KML popups in embedded Google map?

StackOverflow https://stackoverflow.com/questions/1184921

  •  19-09-2019
  •  | 
  •  

Question

I'm using KML to overlay shapes on a Google map. Information corresponding to each shape is included in the <description> element, along with a link to a detail page corresponding to that shape.

So for example, my KML includes this:

<description>
    <![CDATA[
    <div>

     ...

        <p>
            <a href="Concession.20.aspx">View details</a>
        </p>
        &nbsp;
    </div>
]]>

Of course, I would like for that link to open in the same window, since it's just navigating to another page on this same site. Unfortunately, as documented here, links embedded in the <description> element of a KML file are rewritten with target='_blank'.

Targets are ignored when included in HTML written directly into the KML; all such links are opened as if the target is set to _blank. Any specified targets are ignored.

My question: Can anyone think of a workaround that would override this (obnoxious, IMHO) behavior and force these links to open in the same window?

As an example of one approach, I'm currently trying to override the click event on these links (using jQuery), but they're generated dynamically by Google maps and I can't seem to get a hold of them early enough.

Was it helpful?

Solution 2

I've come up with a working solution using jQuery and the map's infowindowopen event. This is in the initialization code for the map:

    map = new google.maps.Map2(document.getElementById("map"));

    ...

    GEvent.addListener(map, "infowindowopen", function() {
        // Get a reference to the infoWindow
        var infoWindow = $(this.getInfoWindow().getContentContainers());
        // Find all <a> tags in the infoWindow and reset their target attribute
        $("a", infoWindow).attr("target", "_self");
    });

OTHER TIPS

I couldn't get those examples to work. In the end I did this in jQuery which opens the link as soon as it's clicked.

  $('#map_canvas').delegate('a', 'click', function(event) {
    window.location.href=$(this).attr('href');
    return false;
  });

This work for me.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function initialize() {
  var myLatlng = new google.maps.LatLng(49.8,15.8);
  var myOptions = {
    zoom: 7,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var ctaLayer = new google.maps.KmlLayer('http://zonglovani.info/mapa/mapa-cz.kml');
  ctaLayer.setMap(map);

  google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
    kmlEvent.featureData.description = kmlEvent.featureData.description.replace(/ target="_blank"/ig, "");
  });
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
});

window.onload = loadScript;
</script>

In order to get to those click events, you can also use the jQuery live events: (Note that the Google Map popups are in a div either with the id 'iw' or the id 'iw_kml')

$('#iw a').live('click', function () {
   $(this)... (Gives you the clicked a-object)

});

Live events will attach to all future matching elements.

I tried several solutions in Google Map API V3, but could not make any one of them to work properly. Here is my latest attempt that seems to work:

google.maps.event.addListener(mapKmlLayer, 'click', function(kmlEvent) {
  kmlEvent.featureData.description = kmlEvent.featureData.description.gsub("_blank", "_self");
});

i've found a more simple solution, just add an onclick behavior to the link: 

onclick='return false;'

your links will change to target="_self" automatically.

but if you want to change to other target, or pheraps remove the attribute you should add a listener and a javascript replace like this:

  GEvent.addListener(map,"infowindowprepareopen", function(iwtabs) {
  iwtabs[0].contentElem.innerHTML = iwtabs[0].contentElem.innerHTML.replace("_blank", "_parent");
  });

this's very usefull to use when you have a lightbox (or similar) link inside the infowindow box.

cheers

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top