Databases
StackOverflow2013
Postsdbo
POHow to insert variable img src in to javascript function (google maps api)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to insert variable img src in to javascript function (google maps api)
    primarykey
    data
    text
    <p>I'm using the code from <a href="https://stackoverflow.com/a/11802989/1836786">this answer</a> to make a toggle legend for a google map. I want each item on the legend to have it's own icon. I have defined the url for the icon along with the layer name and kml url. </p> <p>I have inserted this in to the function code:</p> <pre><code>&lt;img src='dummy.png' id='icons'&gt; </code></pre> <p>and added the following method:</p> <pre><code>document.getElementById("icons").src = kml[prop].icon </code></pre> <p>It does not seem to work as only the first icon is shown, and it is the wrong icon.</p> <p>Where am I going wrong? Full code is below:</p> <pre><code> &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } ul { list-style: none; margin: 0; padding: 0; } &lt;/style&gt; &lt;script type="text/javascript"&gt; var map; // lets define some vars to make things easier later var kml = { a: { name: "MPLS/STPL", url: "https://maps.google.com/maps/ms?authuser=0&amp;vps=5&amp;ie=UTF8&amp;msa=0&amp;output=kml&amp;msid=212971981154994583939.0004b06640255267e038c", icon: "http://img89.imageshack.us/img89/4149/blueiconvib.png" }, b: { name: "Bicycling Tour Routes", url: "https://maps.google.com/maps/ms?authuser=0&amp;vps=4&amp;ie=UTF8&amp;msa=0&amp;output=kml&amp;msid=212971981154994583939.0004902a1824bbc8c0fe9", icon: "http://img201.imageshack.us/img201/6075/greenicon.png" } // keep adding more if ye like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(44.9812, -93.2687), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), options); createTogglers(); }; google.maps.event.addDomListener(window, 'load', initializeMap); // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "&lt;form&gt;&lt;ul&gt;"; for (var prop in kml) { html += "&lt;li id=\"selector-" + prop + "\"&gt;&lt;img src='dummy.png' id='icons'&gt;&lt;input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/&gt;" + kml[prop].name + "&lt;\/li&gt;"; } html += "&lt;li class='control'&gt;&lt;a href='#' onclick='removeAll();return false;'&gt;" + "Remove all layers&lt;\/a&gt;&lt;\/li&gt;" + "&lt;\/ul&gt;&lt;\/form&gt;"; document.getElementById("toggle_box").innerHTML = html; document.getElementById("icons").src = kml[prop].icon }; // easy way to remove all objects function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected: normal); }; function startup() { // for example, this toggles kml b on load and updates the menu selector var checkit = document.getElementById('b'); checkit.checked = true; toggleKML(checkit, 'b'); highlight(checkit, 'selector1'); } &lt;/script&gt; &lt;style type="text/css"&gt; .selected { font-weight: bold; } &lt;/style&gt; &lt;/head&gt; &lt;body onload="startup()"&gt; &lt;div id="map_canvas" style="width: 100%; height: 600px;"&gt;&lt;/div&gt; &lt;div id="toggle_box" style="position: absolute; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 5; "&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USuser1836786
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to insert variable img src in to javascript function (google maps api)
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload