Customize marker icon using geoxml3 parser on an array of kml URLs

Question

We can learn how to customize the marker icon for a kml file parsed using geoxml3 ( from the answer to this question on SO) ).

Code:

var myparser = new geoXML3.parser({
  map: map,
  markerOptions: {
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  }
});

However, I'd like to make my code more efficient when parsing multiple kml files by passing an array of kml URLs to the geoxml3 parser. Here's an example of using an array of kml files and one call to the parser:

var urlArray =[];
urlArray.push("pathto/data1.xml");
urlArray.push("pathto/data2.xml");

var myParser = new geoXML3.parser({
    map: map,
    processStyles: true,
    zoom:false,
    markerOptions: {
        icon: {
            url: "pathTo/icon.png", // url
            scaledSize: new google.maps.Size(48, 48) // scaled size
            }
    },

    afterParse: useTheData  
});

myParser.parse(urlArray);
}

This will set all the options for each kml file parsed to be the same. Questions:

(1) Using the geoxml3 parser this way will create a docs[] array such that I can access each kml file's parsed results using myParser.docs[0] and myParser.docs[1] , correct? This is the 'efficiency' I'm looking for.

(2) How can I uniquely set the marker icon for each kml file parsed to a different unique icon with different attributes such as size?

Answer 1

Create a new instance of the GeoXml3 parser for each file, specify the desired marker icon in the constructor.

The icon used for the file is defined in the array below. Since you need to create a new instance of the parser to change the icon you can't pass an array of URLs to the parser and change the icon per URL in that array.

var icons = ["http://maps.google.com/mapfiles/ms/micons/blue.png",
  "http://maps.google.com/mapfiles/ms/micons/green.png",
  "http://maps.google.com/mapfiles/ms/micons/yellow.png",
  "http://maps.google.com/mapfiles/ms/micons/orange.png"];
function displayKml() {
  var inputs = document.getElementsByClassName('kmlfile');
  for (var i=0; i<inputs.length;i++) {
    geo = new geoXML3.parser({
      map: map,
      zoom: true,
      singleInfoWindow: true,
      markerOptions: {
        icon: icons[i]
      }
    });
    geo.parse(inputs[i].value);
  }
}

• proof of concept link (with links to 3 different KML files)

• proof of concept fiddle (using parseKmlString as won't work with other domain files)

code snippet (with reduced KML due to post size constraints):

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var myparser = new geoXML3.parser({ map: map, markerOptions: { icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" } }); myparser.parseKmlString(kmlStr); myparser = new geoXML3.parser({ map: map, markerOptions: { icon: "http://maps.google.com/mapfiles/ms/micons/green.png" } }); myparser.parseKmlString(kmlStr2); } google.maps.event.addDomListener(window, "load", initialize); var kmlStr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>Massachusetts Cities</name><Folder><Placemark><name>Boston</name><description>Boston is the capital of and largest city in Massachusetts. The Boston Massacre and the Boston Tea Party occurred in Boston and led to the American Revolution.</description><LookAt><longitude>-71.05977300312775</longitude><latitude>42.35843100531216</latitude><altitude>0</altitude><heading>-2.107386233340164e-009</heading><tilt>0</tilt><range>34426.00143998101</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin9</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.05977300312775,42.35843100531217,3.1482280535562</coordinates></Point></Placemark><Placemark><name>Worcester</name><description>Worcester is known as the &quot;Heart of the Commonwealth&quot; due to its location in central Massachusetts, thus, a heart is the official symbol of the city.</description><LookAt><longitude>-71.80229299737233</longitude><latitude>42.2625930065606</latitude><altitude>0</altitude><heading>1.76716070878667e-009</heading><tilt>0</tilt><range>17233.50055269895</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin0</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.80229299737233,42.26259300656061,145.2545892926215</coordinates></Point></Placemark><Placemark><name>Springfield</name><description>Historically the first Springfield in America.</description><LookAt><longitude>-72.58981099924824</longitude><latitude>42.10148299778795</latitude><altitude>0</altitude><heading>5.040065975981161e-010</heading><tilt>0</tilt><range>17277.36855774167</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin6</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-72.58981099984295,42.10148300097482,39.44687703020819</coordinates></Point></Placemark><Placemark><name>Lowell</name><description>Lowell is known as the birthplace of the industrial revolution in the United States.</description><LookAt><longitude>-71.31617200184621</longitude><latitude>42.63342499640326</latitude><altitude>0</altitude><heading>-1.250482781337603e-009</heading><tilt>0</tilt><range>8564.451680780059</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin3</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.31617200184621,42.63342499640325,32.71923637446179</coordinates></Point></Placemark><Placemark><name>Cambridge</name><description>Cambridge is home to two internationally prominent universities, Harvard University and the Massachusetts Institute of Technology.</description><LookAt><longitude>-71.10965300713373</longitude><latitude>42.37264000434871</latitude><altitude>0</altitude><heading>-4.807793248148562e-009</heading><tilt>0</tilt><range>8600.20020650975</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin2</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.10965300713372,42.37264000434871,7.159466020276252</coordinates></Point></Placemark><Placemark><name>Brockton</name><description>Brockton is sometimes referred to as the &quot;City of Champions&quot; due to the success of native boxers Rocky Marciano and Marvin Hagler.</description><LookAt><longitude>-71.01837899995951</longitude><latitude>42.08343399824823</latitude><altitude>0</altitude><heading>2.712218004618013e-011</heading><tilt>0</tilt><range>8639.699317635228</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.0183789999595,42.08343399824823,30.29967761376449</coordinates></Point></Placemark><Placemark><name>New Bedford</name><description>New Bedford is nicknamed &quot;The Whaling City&quot; because during the 19th century it was one of the most important whaling ports in the world.</description><LookAt><longitude>-70.93420500203244</longitude><latitude>41.63621500187266</latitude><altitude>0</altitude><heading>-1.350326753898106e-009</heading><tilt>0</tilt><range>17403.47639378627</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin4</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-70.93420500203244,41.63621500187266,24.75716633283448</coordinates></Point></Placemark><Placemark><name>Fall River</name><description>Fall River is known for Battleship Cove which has the world&apos;s largest collection of World War II naval vessels.</description><LookAt><longitude>-71.15504499654021</longitude><latitude>41.70149101206891</latitude><altitude>0</altitude><heading>2.301640200787889e-009</heading><tilt>0</tilt><range>17385.8377123415</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin7</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.15504499654021,41.70149101206891,23.26129426529637</coordinates></Point></Placemark><Placemark><name>Lynn</name><description>Lynn is about 7 miles north of downtown Boston.</description><LookAt><longitude>-70.94949399981969</longitude><latitude>42.46676300410375</latitude><altitude>0</altitude><heading>1.217166471049273e-010</heading><tilt>0</tilt><range>8587.326697933368</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin5</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-70.94949399981969,42.46676300410375,14.89168526609486</coordinates></Point></Placemark><Placemark><name>Quincy</name><description>Quincy is the birthplace of US Presidents John Adams and John Quincy Adams.</description><LookAt><longitude>-71.00227000742845</longitude><latitude>42.25287699598879</latitude><altitude>0</altitude><heading>-4.994952988379282e-009</heading><tilt>0</tilt><range>17236.11617372477</range><altitudeMode>relativeToGround</altitudeMode><gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode></LookAt><styleUrl>#msn_ylw-pushpin8</styleUrl><Point><altitudeMode>absolute</altitudeMode><coordinates>-71.00227000742845,42.25287699598879,14.5549973299613</coordinates></Point></Placemark></Folder></Document></kml>'; var kmlStr2 = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><Document><name>GPS device</name><Snippet>Created Mon Sep 6 01:15:12 2010</Snippet><Style id="track_n"><IconStyle><Icon><href>http://earth.google.com/images/kml-icons/track-directional/track-none.png</href></Icon></IconStyle></Style><Style id="track_h"><IconStyle><scale>1.2</scale><Icon><href>http://earth.google.com/images/kml-icons/track-directional/track-none.png</href></Icon></IconStyle></Style><StyleMap id="track"><Pair><key>normal</key><styleUrl>#track_n</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#track_h</styleUrl></Pair></StyleMap><Style id="waypoint_n"><IconStyle><Icon><href>http://maps.google.com/mapfiles/kml/pal4/icon61.png</href></Icon></IconStyle></Style><Style id="waypoint_h"><IconStyle><scale>1.2</scale><Icon><href>http://maps.google.com/mapfiles/kml/pal4/icon61.png</href></Icon></IconStyle></Style><StyleMap id="waypoint"><Pair><key>normal</key><styleUrl>#waypoint_n</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#waypoint_h</styleUrl></Pair></StyleMap><Style id="lineStyle"><LineStyle><color>99ffac59</color><width>6</width></LineStyle></Style><Folder><name>Waypoints</name><Placemark><name>Alewife Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10029&amp;lat=42.395261&amp;lng=-71.142449</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.140981,42.394907</coordinates></Point></Placemark><Placemark><name>Davis Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11404&amp;lat=42.39662&amp;lng=-71.122527</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.122055,42.396064</coordinates></Point></Placemark><Placemark><name>Porter Square Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=13912&amp;lat=42.388353&amp;lng=-71.119159</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.119244,42.388346</coordinates></Point></Placemark><Placemark><name>Harvard Square Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=12084&amp;lat=42.373936&amp;lng=-71.118917</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.119106,42.373939</coordinates></Point></Placemark><Placemark><name>Central Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10919&amp;lat=42.365326&amp;lng=-71.103474</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.103323,42.365163</coordinates></Point></Placemark><Placemark><name>Kendall/MIT Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=12412&amp;lat=42.362427&amp;lng=-71.086058</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.086586,42.362460</coordinates></Point></Placemark><Placemark><name>Charles/Massachusetts General Hospital Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11048&amp;lat=42.361279&amp;lng=-71.070493</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.072080,42.361271</coordinates></Point></Placemark><Placemark><name>Park Street Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=13771&amp;lat=42.356332&amp;lng=-71.062202</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.062295,42.356197</coordinates></Point></Placemark><Placemark><name>Downtown Crossing Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11473&amp;lat=42.355453&amp;lng=-71.060465</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.060788,42.355295</coordinates></Point></Placemark><Placemark><name>South Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=14435&amp;lat=42.352573&amp;lng=-71.055428</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.055000,42.351710</coordinates></Point></Placemark><Placemark><name>Broadway Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10641&amp;lat=42.342793&amp;lng=-71.057117</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.057130,42.342900</coordinates></Point></Placemark><Placemark><name>Andrew Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=10062&amp;lat=42.329752&amp;lng=-71.056979</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.056960,42.329550</coordinates></Point></Placemark><Placemark><name>JFK / UMass Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=12410&amp;lat=42.321065&amp;lng=-71.052545</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.052393,42.321438</coordinates></Point></Placemark><Placemark><name>Savin Hill Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=14289&amp;lat=42.311099&amp;lng=-71.053175</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.053230,42.311307</coordinates></Point></Placemark><Placemark><name>Fields Corner Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=11781&amp;lat=42.299992&amp;lng=-71.061516</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.060708,42.300262</coordinates></Point></Placemark><Placemark><name>Shawmut Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=14352&amp;lat=42.293712&amp;lng=-71.065912</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.065782,42.292794</coordinates></Point></Placemark><Placemark><name>Ashmont Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15481&amp;lat=42.284219&amp;lng=-71.063229</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.064219,42.285924</coordinates></Point></Placemark><Placemark><name>Cedar Grove Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15659&amp;lat=42.279712&amp;lng=-71.060327</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.059742,42.278420</coordinates></Point></Placemark><Placemark><name>Butler Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15660&amp;lat=42.272253&amp;lng=-71.062453</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.062768,42.272117</coordinates></Point></Placemark><Placemark><name>Milton Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15692&amp;lat=42.270093&amp;lng=-71.067612</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.067950,42.270347</coordinates></Point></Placemark><Placemark><name>Central Avenue Station</name><Snippet/><description>http://mbta.com/schedules_and_maps/subway/lines/stations/?stopId=15664&amp;lat=42.269965&amp;lng=-71.073249</description><styleUrl>#waypoint</styleUrl><Point><coordinates>-71.073250,42.270013</coordinates></Point></Placemark></Folder><Folder><name>Tracks</name><Folder><name>Red Line (main)</name><Snippet/><description><![CDATA[<table><tr><td><b>Distance</b>8.4 mi</td></tr><tr><td><b>Min Alt</b>621371.192 mi</td></tr><tr><td><b>Max Alt</b>-328083986.719 ft</td></tr></table>]]></description><Folder><name>Points</name></Folder></Folder></Folder></Document></kml>';

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script> <div id="map_canvas"></div>