Google Maps API - Javascript Filter -
i utilizing google maps api in application polygons visualize locations. im trying allow user filter attribute using select , update polygons on change filtered output. filter returning correct data not updating polygons. going wrong?
filter
$('#species_select').change(function(){ $.get( '/species_filter', $('#species_select').val(), function(data){ console.log(data); infowindow.close(); // map.fitbounds(bounds); } ); }); polygons
var map; var infowindow; // map display options function initmap() { map = new google.maps.map(document.getelementbyid('map'), { zoom: 9, center: {lat: 42.05, lng: -70.25}, maptypeid: google.maps.maptypeid.satellite }); // define latlng coordinates polygon. var cc_peaked_hill = [ {lat: 42.049803, lng: -69.970551}, {lat: 42.048273, lng: -69.978790}, {lat: 42.043684, lng: -70.046082}, {lat: 42.043684, lng: -70.058441}, {lat: 42.056940, lng: -70.085907}, {lat: 42.070194, lng: -70.118179}, {lat: 42.079369, lng: -70.156631}, {lat: 42.082426, lng: -70.177231}, {lat: 42.082936, lng: -70.195084}, {lat: 42.084974, lng: -70.210190}, {lat: 42.089561, lng: -70.210190}, {lat: 42.098732, lng: -70.210190}, {lat: 42.107902, lng: -70.212250}, {lat: 42.114524, lng: -70.215683}, {lat: 42.115033, lng: -70.188217}, {lat: 42.115033, lng: -70.162811}, {lat: 42.110958, lng: -70.127792}, {lat: 42.103827, lng: -70.090714}, {lat: 42.088541, lng: -70.046768}, {lat: 42.074782, lng: -70.011749}, {lat: 42.049803, lng: -69.970551} ] ; // construct polygon. var cc_peaked_hill_billspollygon = new google.maps.polygon({ paths: cc_peaked_hill, strokecolor: '#f7f8ff', strokeopacity: 0.8, strokeweight: 1, fillcolor: '#4562a8', fillopacity: 0.45, editable: false, map: map }); // add listener click event. cc_peaked_hill_billspollygon.addlistener('click', // set info window content location report function (event) { console.log(location_reports); var location_reports = cc_peaked_hill; var contentstring = '<table>\n <thead>\n <tr> \n <th>date<\/th>\n <th>target species<\/th>\n <th>vessel name<\/th>\n <th>primary method<\/th>\n <th>catch total<\/th>\n <th>trip summary<\/th>\n <\/tr>\n <\/thead>\n\n <tbody>\n <b>cc - peaked hill<\/b> <br>\n peaked hill bar <br> <br>\n <tr>\n <td>2016-05-29<\/td> \n <td>tuna<\/td>\n <td>endurance<\/td>\n <td>live bait<\/td>\n <td>1<\/td>\n <td>good bite on outgoing<\/td>\n <\/tr>\n <tr>\n <td>2016-06-01<\/td> \n <td>tuna<\/td>\n <td>tradition<\/td>\n <td>live bait<\/td>\n <td>1<\/td>\n <td>kite bite live mack<\/td>\n <\/tr>\n <tr>\n <td>2016-06-07<\/td> \n <td>bluefish<\/td>\n <td>obsession<\/td>\n <td>live bait<\/td>\n <td>1<\/td>\n <td>top water bite @ daybreak<\/td>\n <\/tr>\n <\/tbody>\n <\/table>'; // replace info window's content , position. infowindow.setcontent(contentstring); infowindow.setposition(event.latlng); infowindow.open(map); } ); html
<form id="species_form" action="/species_filter" > <select name="species" class="form-control m-b" id="species_select"> <option value="tuna">tuna</option> <option value="haddock">haddock</option> <option value="bass">bass</option> <option value="flounder">flounder</option> <option value="bluefish">bluefish</option> <option value="striped bass">striped bass</option> <option value="cod & haddock">cod</option> </select> </form>
i haven't tried it, try create onmapready() onconnected(), add buildgoogleapiclient() call oncreate() onmapready()
@override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_map); //buildgoogleapiclient(); // obtain supportmapfragment , notified when map ready used. supportmapfragment mapfragment = (supportmapfragment) getsupportfragmentmanager() .findfragmentbyid(r.id.map); mapfragment.getmapasync(this); } @override public void onmapready(googlemap googlemap) { mmap = googlemap; mmap.setmylocationenabled(true); //add here: buildgoogleapiclient(); //latlng loc = new latlng(lat, lng); //mmap.movecamera(cameraupdatefactory.newlatlng(loc)); } @override public void onconnected(bundle bundle) { mlastlocation = locationservices.fusedlocationapi.getlastlocation( mgoogleapiclient); if (mlastlocation != null) { lat = mlastlocation.getlatitude(); lng = mlastlocation.getlongitude(); mmap.movecamera(cameraupdatefactory.newlatlng(loc)); } } you can use requestlocationupdates(), , call removelocationupdates() when first location comes in.
here's demo app can understand how maps api works: https://github.com/googlemaps/android-samples/tree/master/apidemos
Comments
Post a Comment