javascript google-maps google-maps-api-3 geoxml3 geoxml

How to "AddListener placemark click" with GeoXML3

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

Solution

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