0

I am hoping a Google maps (geoxml3) expert may be able to help. What I am trying to do is really quite simple, but i'm just not savvy enough with coding to accomplish it.

I have a simple map using the google maps api v3 and geoxml3 which loads some KML data.

I then have a custom generated sidebar which corresponds to each placemark.

I would simply like to add zoom in and zoom out buttons to the infowindow like in the following example.

http://www.geocodezip.com/v3_MW_example_map3_zoom.html

I know that I have to create a custom marker and add the html content, but I am having a lot of trouble getting it to work with the kml click.

I have not included an attempt at the custom marker btw...

Example here:

http://webstgcc.onthenet.com.au/map/map.html

My code so far:

var geoXml = null;
var map = null;
var myLatLng = null;
var infowindow = null;
var filename = "KML_Samples.kml";
var image = ""; 

function initialize() {
myLatLng = new google.maps.LatLng(-28.014408,153.463898);

var myOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("googlemap"),myOptions);
infowindow = new google.maps.InfoWindow({maxWidth:300});

geoXml = new geoXML3.parser({
    map: map,
    infowindow: infowindow,
    singleInfoWindow: true,
    markerOptions: {icon: image},
    afterParse: useTheData
});
geoXml.parse(filename);
};                  
function kmlClick(marker) {
    google.maps.event.trigger(geoXml.docs[0].markers[marker],"click");
}
function useTheData(doc){
// Geodata handling goes here, using JSON properties of the doc object
for (var i = 0; i < doc[0].markers.length; i++){}
};
google.maps.event.addDomListener(window, 'load', initialize);

It took me quite a while just to get this to work, so please forgive me if this is really simple stuff.

Any help would be much appreciated.

Palle
  • 166
  • 1
  • 1
  • 9

1 Answers1

2

Supply a custom createMarker-function to geoXML3.parser()

A simple approach that uses the marker created by the built-in function and only modifies the content for the infoWindow:

infowindow = new google.maps.InfoWindow({minWidth:250, maxWidth:300});
geoXml = new geoXML3.parser({
    map: map, 
    infowindow: infowindow,
    singleInfoWindow: 1,
    afterParse: useTheData,

    createMarker: function (placemark, doc) {
      //get the marker from the built-in createMarker-function
      var marker=geoXML3.instances[0].createMarker(placemark, doc);
      //modify the content
      if(marker.infoWindow){
        marker.infoWindowOptions.content=
        '<div class="geoxml3_infowindow"><h3>' + placemark.name +
        '</h3><div>' + placemark.description + '</div>'+
        '<code onclick="map.setCenter(new google.maps.LatLng'+
          marker.getPosition().toString()+
        ');map.setZoom(map.getZoom()+1);">zoom in</code><br/>'+
        '<code onclick="map.setCenter(new google.maps.LatLng'+
          marker.getPosition().toString()+
        ');map.setZoom(map.getZoom()-1);">zoom out</code>'+
        '</div>';
      }
    return marker;
  }
});
Pim Schaaf
  • 456
  • 6
  • 16
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Thank you for your reply, however the zoom function doesn't zoom in on the marker, only on the map center. I have updated the test page. http://webstgcc.onthenet.com.au/map/map.html. Any ideas? – Palle Jun 10 '14 at 03:33
  • If you want to zoom on the marker, you have to change the center to be the marker, then change the zoom `map.setCenter(marker.getPosition()); map.setZoom(map.getZoom()+1);` – geocodezip Jun 10 '14 at 04:34
  • Thanks again, but that doesn't seem to work either. I am getting the following error : 'ReferenceError: marker is not defined'. I'm lost, as the marker is defined above? – Palle Jun 10 '14 at 05:31
  • I've added the centering-code above(marker is not accessible in the click-handler, you must use the position of the marker directly) – Dr.Molle Jun 10 '14 at 10:06