Can't Get Kml Files To Load On Start Or Location Search To Work In Custom Map

I'm not a javascript guru, so this project I'm working on has been pretty challenging. I've managed to gather up various bits of code to create my map, and I'm almost there, but am

Solution 1:

In your initialize function add the KML layers to your map as you are when they're being checked. Except, since you already know the id of the layers (the values that reference them in your kml json object) you can simply just reference them when you declare your layer variables. (Make sure the following code comes after your setting your map object map = new google.maps.Map(document.getElementById("map_canvas"), options);).

var layer1 = new google.maps.KmlLayer(kml.a.url, {
           preserveViewport: true,
           suppressInfoWindows: true 
       });
var layer2 = new google.maps.KmlLayer(kml.b.url, {
           preserveViewport: true,
           suppressInfoWindows: true 
       });
layer1.setMap(map);
layer2.setMap(map);

kml.a and kml.b refer to your layer objects inside your global kml object.

Note, this is feasible for this example because we know there are only 2 values inside your json and we know what they are. If you have a large kml object with many layers run this in a for ... in loop.

Solution 2:

Change your "createTogglers function to create the KmlLayers and add them to the map (and check the boxes):

functioncreateTogglers() {

   var html = "<form><ul>";
   for (var prop in kml) {
       html += "<li id=\"selector-" + prop + "\"><input type='checkbox' checked='checked' id='" + prop + "'" +
       " onclick='highlight(this, \"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
       kml[prop].name + "<\/li>";

    var layer = new google.maps.KmlLayer(kml[prop].url, {
           preserveViewport: true,
           suppressInfoWindows: true 
       });

       kml[prop].obj = layer; // turns the layer into an object for reference later
       kml[prop].obj.setMap(map); // alternative to simply layer.setMap(map)

   }
   html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
   "Remove all layers<\/a><\/li>" + 
   "<\/ul><\/form>";

   document.getElementById("toggle_box").innerHTML = html;


 };

Your "showAddress" function doesn't exist. A good sample for that is the "codeAddress" function in this example from the documentation, although you can modify it to zoom to the recommended viewport, if that is what you want.

working example