How to "AddListener placemark click" with GeoXML3

Question

I have a Google map, with placemarks from a .kmz file, and an "AddListener" event to display customized placemark information when a placemark is clicked : http://Bus.w.pw/DefaultIconAddListener.html :

<script src=https://Maps.GoogleAPIs.com/maps/api/js?v=3.exp&sensor=false></script>

<script>

function I() {

M = new google.maps.Map(document.getElementById('D'), {
    center: new google.maps.LatLng(43.31,-0.36),
    zoom: 14
})

L = new google.maps.KmlLayer({url: 'http://Bus.w.pw/TA.kmz', suppressInfoWindows: true})
L.setMap(M)

google.maps.event.addListener(L, 'click', function(E) {
    W = new google.maps.InfoWindow({content: 'Customization' + E.featureData.description, position: new google.maps.LatLng(E.latLng.lat(),E.latLng.lng())})
    W.open(M)
})

}

google.maps.event.addDomListener(window, 'load', I)

</script>

<div id=D style='width:90%;height:90%'>

But I wanted placemarks to have a custom icon instead of the default Google icon.

To get this result, I use GeoXML3 : http://Bus.w.pw/CustomIconWithGeoXML.html :

<script src=https://Maps.GoogleAPIs.com/maps/api/js?v=3.exp&sensor=false></script>
<script src=GeoXML3.js></script>
<script src=ZipFile.complete.js></script>

<script>

function I() {

M = new google.maps.Map(document.getElementById('D'), {
    center: new google.maps.LatLng(43.31,-0.36),
    zoom: 14
})

P = new geoXML3.parser({map:M, markerOptions: {icon:'R.png'}, afterParse: S})
P.parse('http://Bus.w.pw/TA.kmz')
}

function S() {
    P.showDocument(P.docs[0])
}

google.maps.event.addDomListener(window, 'load', I)

</script>

<div id=D style='width:90%;height:90%'>

Now my question is :

How to have at the same time :

a custom icon for placemarks
and an "AddListener" event, in order to display a customized InfoWindow that depends on the placemark which has been clicked

?

Where does the text for the custom infoWindow come from (or if it comes from the KML, how do you want to customize it)? — geocodezip, Feb 26 '14 at 11:10
It comes from the KMZ : I want to customize the InfoWindow, by using only some parts of the text included in the KMZ (with javascript "substr" function). — Fon.com, Feb 26 '14 at 11:51
You probably need to suppress the infowindows from geoxml3 and add your own listener functions to the markers or write a custom createMarker function that does it. — geocodezip, Feb 26 '14 at 12:47
That is what I have been trying : "suppressInfoWindows: true" + createMarker, but I can't get it working : http://Bus.w.pw/CreateMarker.html . Can you help me? — Fon.com, Feb 26 '14 at 13:28
Don't have time right now. But when time permits... I think you have at least two problems, your createMarker function doesn't return the marker created and the visibility of the Placemarks is set to 0 in your KML. — geocodezip, Feb 26 '14 at 14:14
I found : Bus.w.pw/CreateMarker.html . Solution found on https://gist.github.com/1241336/a0de0fb6e353d680fa70a56f204aec426d8ed115 : one must NOT use "suppressInfoWindows: true", but MUST use "singleInfoWindow: true" . Thanks for your help ( = 1), it would not have worked without this! — Fon.com, Feb 27 '14 at 07:16
You MUST use "singleInfoWindow: true" to get it working, however it doesn't behave as expected : an additionnal infowindow is opened each time a marker is clicked (it does NOT close the previous infowindow)... — Fon.com, Feb 27 '14 at 07:35

score 0 · Accepted Answer · answered Feb 27 '14 at 02:11

return a marker from your createMarker function
use valid HTML
suppress the existing infowindows, and include a global infowindow (unless you like being able to have multiple infowindows open at a time, I don't).
You can customize your marker more, center it on the geographic location, by default the v3 API puts the bottom center of the image at the location.
set the visibility of your Placemarks to '1' in the KML:
```
<visibility>1</visibility>
```

Code:

<html>
<head>
<title>Custom CreateMarker</title>

<script src=https://maps.googleapis.com/maps/api/js?v=3&sensor=false></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/ZipFile.complete.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script type="text/javascript">

var infowindow = new google.maps.InfoWindow();
var M = null;
var P = null;
function I() {

 M = new google.maps.Map(document.getElementById('D'), {
  center: new google.maps.LatLng(43.31,-0.36),
  zoom: 14
 });

 P = new geoXML3.parser({map:M, markerOptions: {icon:{url:'http://bus.w.pw/R.png',size:new google.maps.Size(9,9),anchor:new google.maps.Point(5,5)}}, afterParse: S, createMarke\
r: CM, suppressInfoWindows: true});
 P.parse('SO_20140226_bus_w_pw_TA.kml');
}

function S() {
 P.showDocument(P.docs[0]);
}

function CM(placemark) {
 var marker = P.createMarker(placemark);
 google.maps.event.addListener(marker, 'click', function(E) {
  infowindow.setContent('Description : ' + placemark.description+"<br>"+'Latitude & longitude : ' + E.latLng );
  infowindow.setPosition(marker.getPosition());
  infowindow.open(M /* ,marker */);
 })
 return marker;
}

google.maps.event.addDomListener(window, 'load', I)

</script>
</head>
<body>
<div id="D" style="width:600px;height:500px">
</body>
</html>

working example

How to "AddListener placemark click" with GeoXML3

1 Answers1