Databases
StackOverflow2013
Postsdbo
POdynamic legend for fusion table map
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdynamic legend for fusion table map
    primarykey
    data
    text
    <p>I have a modified sample of fusion table map and its code is given below.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Fusion Tables Layer Example: Dynamic styles and templates&lt;/title&gt; &lt;style&gt; body { font-family: Arial, sans-serif; font-size: 12px; } #map-canvas { height: 660px; width: 100%; } #map-canvas img { max-width: none; } #visualization { height: 100%; width: 100%; } #legend1 { width: 200px; background: #FFF;padding: 10px; margin: 5px;font-size: 12px;font-family: Arial, sans-serif;border: 1px solid black;} .color {border: 1px solid;height: 12px;width: 15px; margin-right: 3px;float: left;} .red {background: #C00;} .blue {background: #06C;} &lt;/style&gt; &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function initialize() { var map = new google.maps.Map(document.getElementById('map-canvas'), { center: new google.maps.LatLng(37.4, -122.1), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }); var layer = new google.maps.FusionTablesLayer({ query: { select: 'Address', from: '15UY2pgiz8sRkq37p2TaJd64U7M_2HDVqHT3Quw' }, map: map, styleId: 1, templateId: 1 }); var legend1 = document.createElement('div'); legend1.id = 'legend1'; var content1 = []; content1.push('&lt;p&gt;&lt;div class="color red"&gt;&lt;/div&gt;Red markers&lt;/p&gt;'); legend1.innerHTML = content1.join(''); legend1.index = 1; map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend1); var legend2 = document.createElement('div'); legend2.id = 'legend1'; var content2 = []; content2.push('&lt;p&gt;&lt;div class="color blue"&gt;&lt;/div&gt;Blue markers&lt;/p&gt;'); legend2.innerHTML = content2.join(''); legend2.index = 1; map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend2); google.maps.event.addDomListener(document.getElementById('style'), 'change', function() { var selectedStyle = this.value; layer.set('styleId', selectedStyle); var selectedTemplate = this.value; layer.set('templateId', selectedTemplate); }); } google.maps.event.addDomListener(window, 'load', initialize); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="map-canvas"&gt;&lt;/div&gt; &lt;div&gt; &lt;label&gt;Select style:&lt;/label&gt; &lt;select id="style"&gt; &lt;option value="1"&gt;Red&lt;/option&gt; &lt;option value="2"&gt;Blue&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>How can I add dynamic legend to this map so that when selecting blue markers, the legend should show only a blue marker with its name and when selecting red markers it will show the red marker icon in legend.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmpsbhat
    1. USmpsbhat
    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. POdynamic legend for fusion table map
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POdynamic legend for fusion table map
      1. This table or related slice is empty.
      1. VTUndeletion
    1. COThe color of a marker is not enough information. Your example only changes the color of each marker, may I assume that you want to have marker-colors based on the value of a column(regarding to the used table I would guess on the `delivery`-column) and want to filter the markers based on this column?
      singulars
      1. POdynamic legend for fusion table map
      1. USDr.Molle
    2. COI require a legend in right bottom corner of the map which shows which style type is selected. ie, if selected blue marker, it should show the blue marker icon and so on.
      singulars
      1. POdynamic legend for fusion table map
      1. USmpsbhat
    3. COThere are only blue markers when you select the blue markers from the dropdown, there is no condition to show specific markers(you did not specify any where-clause), so there isn't any dynamic condition to apply a dynamic legend.
      singulars
      1. POdynamic legend for fusion table map
      1. USDr.Molle
 

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