Simple filter in legend Google Maps API v3 -



Simple filter in legend Google Maps API v3 -

i totally new google maps api , programming, learning alot though, can hard me because lack of knowledge , experience, i'm proud made 0 experience. wondering how implement simple filter in legend? simple toggle checkbox hides markers. save me alot of time. help appreciated, reading! working map now:

class="lang-html prettyprint-override"><!doctype html> <html> <head> <title>spierings points of interest</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user- scalable=no"> <meta charset="utf-8"> <style> html, body, #map_canvas { width: 800px; height: 400px; } #legend { font-family: helvetica;color: #ffd900; background: rgba(0, 0, 0, 0.6); padding: 25px; margin: 25px; border: 1px solid #ffd900; } #legend h3 { margin-top: 0; } #legend img { vertical-align: middle; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> var map; function initialize() { map = new google.maps.map(document.getelementbyid('map_canvas'), { zoom: 13, center: new google.maps.latlng(51.789532, 5.548550), maptypeid: google.maps.maptypeid.roadmap, styles: [ { stylers: [ { hue: '#ff1a00' }, { invert_lightness: true }, { saturation: -100 }, { lightness: 33 }, { gamma: 0.5 } ] }, { featuretype: 'poi.business', elementtype: ' labels.icon', stylers: [ { visibility: 'on' }, { hue: '#fff700' }, { lightness: -15 }, { saturation: 99 } ] }, { featuretype: 'water', elementtype: 'geometry', stylers: [ { color: '#2d333c' }, { lightness: 15 } ] }, { featuretype: 'transit.station.rail', elementtype: 'labels.text.stroke', stylers: [ { visibility: 'on' }, { color: '#ff6666' } ] }, { featuretype: 'poi', elementtype: 'geometry', stylers: [ { visibility: 'on' }, { lightness: -35 } ] }, { featuretype: 'road.local', elementtype: 'geometry.fill', stylers: [ { visibility: 'on' }, { hue: '#ffd900' }, { lightness: 30 }, { saturation: 99 } ] } ] }); var iconbase = 'https://i.imgur.com/'; var icons = { spierings: { name: 'spierings mobile cranes', icon: iconbase + '2llavwx.png' }, hotel: { name: 'hotel', icon: iconbase + 'fq85rxi.png' }, gasstation: { name: 'gas station', icon: iconbase + '71yrkjy.png' }, trainstation: { name: 'train station', icon: iconbase + 'h1cwwio.png' } }; function addmarker(feature) { var marker = new google.maps.marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); } var features = [ { position: new google.maps.latlng(51.789532, 5.548550), type: 'spierings' }, { position: new google.maps.latlng(51.763214, 5.518806), type: 'hotel' }, { position: new google.maps.latlng(51.752384, 5.533238), type: 'gasstation' }, { position: new google.maps.latlng(51.764920, 5.529560), type: 'trainstation' } ]; (var = 0, feature; feature = features[i]; i++) { addmarker(feature); } var legend = document.getelementbyid('legend'); (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var div = document.createelement('div'); div.innerhtml = '<img src="' + icon + '"> ' + name; legend.appendchild(div); } map.controls[google.maps.controlposition.right_bottom].push(legend); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas"></div> <div id="legend"><h3>points of interest</h3></div> </body> </html>

like this

<!doctype html> <html> <head> <title>spierings points of interest</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user- scalable=no"> <meta charset="utf-8"> <style> html, body, #map_canvas { width: 800px; height: 400px; } #legend { font-family: helvetica;color: #ffd900; background: rgba(0, 0, 0, 0.6); padding: 25px; margin: 25px; border: 1px solid #ffd900; } #legend h3 { margin-top: 0; } #legend img { vertical-align: middle; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> var map; var markers = []; // store markers here, function initialize() { map = new google.maps.map(document.getelementbyid('map_canvas'), { zoom: 13, center: new google.maps.latlng(51.789532, 5.548550), maptypeid: google.maps.maptypeid.roadmap, styles: [ { stylers: [ { hue: '#ff1a00' }, { invert_lightness: true }, { saturation: -100 }, { lightness: 33 }, { gamma: 0.5 } ] }, { featuretype: 'poi.business', elementtype: ' labels.icon', stylers: [ { visibility: 'on' }, { hue: '#fff700' }, { lightness: -15 }, { saturation: 99 } ] }, { featuretype: 'water', elementtype: 'geometry', stylers: [ { color: '#2d333c' }, { lightness: 15 } ] }, { featuretype: 'transit.station.rail', elementtype: 'labels.text.stroke', stylers: [ { visibility: 'on' }, { color: '#ff6666' } ] }, { featuretype: 'poi', elementtype: 'geometry', stylers: [ { visibility: 'on' }, { lightness: -35 } ] }, { featuretype: 'road.local', elementtype: 'geometry.fill', stylers: [ { visibility: 'on' }, { hue: '#ffd900' }, { lightness: 30 }, { saturation: 99 } ] } ] }); var iconbase = 'https://i.imgur.com/'; var icons = { spierings: { name: 'spierings mobile cranes', icon: iconbase + '2llavwx.png' }, hotel: { name: 'hotel', icon: iconbase + 'fq85rxi.png' }, gasstation: { name: 'gas station', icon: iconbase + '71yrkjy.png' }, trainstation: { name: 'train station', icon: iconbase + 'h1cwwio.png' } }; function addmarker(feature) { var marker = new google.maps.marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); markers.push({ marker: marker, type: feature.type }); } var features = [ { position: new google.maps.latlng(51.789532, 5.548550), type: 'spierings' }, { position: new google.maps.latlng(51.763214, 5.518806), type: 'hotel' }, { position: new google.maps.latlng(51.752384, 5.533238), type: 'gasstation' }, { position: new google.maps.latlng(51.764920, 5.529560), type: 'trainstation' } ]; (var = 0, feature; feature = features[i]; i++) { addmarker(feature); } var legend = document.getelementbyid('legend'); var i=0; (var key in icons) { var type = icons[key]; var name = type.name; var icon = type.icon; var div = document.createelement('div'); div.innerhtml = '<input checked="checked" type="checkbox" onchange="toggletype(this, event, \'' + features[i].type + '\')"><img src="' + icon + '"> ' + name; legend.appendchild(div); i++; } map.controls[google.maps.controlposition.right_bottom].push(legend); } function toggletype(elm, event, type) { var on = elm.checked ; for(var i=0; i<markers.length; i++) { if (markers[i].type == type) { markers[i].marker.setmap( on ? map : null); } } } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map_canvas"></div> <div id="legend"><h3>points of interest</h3></div> </body> </html>

groeten uit brussel

google-maps google-maps-api-3 checkbox filter google-maps-markers

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more