Google map api markerid :: Hinnavaatluse Foorumid

-vodafone- · HV Guru liitunud: 26.04.2005

Hei veebieksperdid. Läheks natukene abi vaja seoses Google maps api markeritega.

Huvi ja hobi korras üritan luua kalastuskaarti, kus kalastuspaigad üles märkida ning paar informatiivset rida kirja panna teistele kalahuvilistele + väike videoblogi sinna juurde.
Hankisin html5 peale sobiliku põhja ning hakkasin nikerdama, kuid kuna veebi teemal väga ise eksperdina ennast ei tunne siis vajaks veidi abi markerite filtreerimise funktsionaalsuse lisamiseks.

Mõningaid filtreid olen kohanud html5 sees, kus näiteks pildigalerii erinevaid pilte filtreerida (data-option-value=), kuid kas sama asja saaks teha google maps api markeritega + iga filtreeritava grupi marker on isevärvi vms?
a.la filtri nupp sinised jätab kaardile ainult sinised markerid, filtri nupp punane jätab ainult punased markerid jne.

Lehekülg ise on www.vetelkäigud.ee
maps.js:

Spoiler

jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

// Multiple Markers
var markers = [
['Õhne Jõgi - Forell', 58.020101,25.945752],
['Pädaste Laht - Haug', 58.543481,23.303179],
 ['Laialepa - Ahven/Haug', 58.481379,21.858795],
 ['Suurupi - Lõhe', 59.463091,24.34776],
 ['Liva all - Angerjas/Latikas', 58.061171, 26.049446],
 ['Paunküla veehoidla', 59.123387, 25.325242],
 ['Pirita jõgi - Lagedi', 59.382946, 24.937700],

];
// Info Window Content
var infoWindowContent = [
//Õhne Jõgi
['<div class="map_address">' +
'<h3>Õhne jõgi - sillast allavoolu.</h3>' +
 'Kala: Forell - Suurim saak 1,7kg (C&R). Leidub ka ahvenat ja haugi ' +
 'Sööt:Keerulant nr 2-3. Kevadel erksamad värvid' +
 'Liiklemine:Jalgsi ~1km allavoolu. Soovituslikult kummikud või kahlakad' +
 'Info:Ligipääsetavus hea, kaldad erineva relieefiga, palju langenud puid.' +
 'Videoblogi:<a href="index.html"></a>' +
 '</div>'],
//Pädaste Laht
 ['<div class="map_address">' +
'<h3>Pädaste laht</h3>' +
 'Kala: Haug - Suurim saak 4,8kg' +
 'Sööt: Abu Garcia Atom , soovituslikult hõbedane. Teised ei toimi pooltki nii hästi. Sügisel ~18.00 ajal vahetada valge/sinise kummilandi vastu (Relax toimib hästi) ' +
 'Liiklemine: Kahlakatega hea, paadiga veel parem. Kuigi sügisel kala üsna madalas, siis kaldalt loopida on kehv (madal)' +
 'Info: Sügisel 5h jooksul kahepeale 30 haugi no problem. ' +
 'Videoblogi<a href="index.html"></a>:' +
 '</div>'],
//Laialepa
 ['<div class="map_address">' +
'<h3>Laialepa "laht"</h3>' +
 'Kala: Ahven - Suurim saak 1,2kg' +
 'Sööt: Keerulant, väike vobbler' +
 'Liiklemine: 2-3km jalgsi matka parklast. Järve ümbrus soine, eeldab kahlakaid või kummipaati.' +
 'Info: Lääne osa suhteliset madal ja mereheina täis, kuid parimat võttu kohtab just seal' +
 'Videoblogi:<a href="index.html"></a>' +
 '</div>'],
//Suurupi
 ['<div class="map_address">' +
'<h3>Suurupi rannik</h3>' +
 'Kala: Lõhe, meriforell - Suurim saak 3,1kg (lõhe)' +
 'Sööt: Tavaline merikas - 10-20g piklik hõbedane musta silmaga' +
 'Liiklemine: Kahlakatega 0,5-1m sügavusel hiirvaikselt' +
 'Info: Teada-tuntud salakoht. Veetemperatuuril 4*..9* võib mõnel paremal päeval südasuve Stroomiranda meenutada. ' +
 'Videoblogi:<a href="index.html"></a>' +
 '</div>'],
//Liva all Latikas/Angerjas
 ['<div class="map_address">' +
'<h3>Väike-Emajõgi "Liva all"</h3>' +
 'Kala: Latikas, nurg, angerjas - Suurim saak (Latikas 1,6kg, Angerjas 1,5kg)' +
 'Sööt: Eeldaks sissesöötmist. Parim võtt mullaussiga, kus maisitera puntra sees umbes kella 4-6 ajal hommikul.' +
 'Liiklemine: Ligipääs hea. Ca 50m kaugusele saab ka kõrgema sõiduautoga.' +
 'Info: Üsna populaarne koht kalameeste seas, seega ei ole kindlasti tegemist "salakohaga".' +
 'Videoblogi:<a href="index.html"></a>' +
 '</div>'],
//Paunküla veehoidla
 ['<div class="map_address">' +
'<h3>Paunküla veehoidla - Rõõsa poolne nurk</h3>' +
 'Kala: Haug, ahven, karp' +
 'Sööt: Ei ole leidnud kindlat soovi neile. Karp võtab maisi ja SAIAGA' +
 'Liiklemine: Paat' +
 'Info: Kui tahad nädalavahetusel ilusa ilmaga minna, siis peaks neljapäeval kohale minema. Kaldal rahvast rohkem kui Narva linnas' +
 'Videoblogi:<a href="index.html></a>' +
 '</div>'],
//Lagedi haug
 ['<div class="map_address">' +
'<h3>Pirita jõgi - Lagedi.</h3>' +
 'Kala: Haug 1,3Kg' +
 'Sööt: Unnapüügil kasutasime elussöödana väikest kokre (püütud 500m eemal asuvast tiigist)' +
 'Liiklemine: Kaldaäärsed on eramaju täis, seega peale saab oma paadiga kas Muuseumi juurest või siis Lagedi kärestiku kõrvalt.' +
 'Info: Jõgi ~3-15m lai, kohati üsna madal kuid esineb ka sügavamaid kääre, kus Haug jahedamat vett naudib.' +
 'Videoblogi:<a href="160515.html"> 1,3Kg haug (vaatamiseks kliki lingil)</a>' +
 '</div>'],


];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});

// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));

// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(6);
google.maps.event.removeListener(boundsListener);
});

}

Edit: Uurin põgusalt ka Google oma dokumentatsiooni (https://developers.google.com/maps/documentation/javascript/examples/marker-remove)
Edit2: Tundub, et asjata paanitsesin, proovin näidete põhjal hakkama saada.

andresv · HV kasutaja liitunud: 06.12.2004

Võibolla oleks mõistlik on andmed (markerite info) tabelisse kirja panna(fusion tables näiteks)

https://support.google.com/fusiontables/answer/184641
filtreerimise võimalus paistis ka olemas olema
https://support.google.com/fusiontables/answer/2562121?hl=en