Om de vreemde reden werkt het verwijderen van markers niet meer
Eigenlijk wil ik de google maps markers verbergen.
Ik volg de documentatie, maar er gebeurd niks.
Ik doe dit helemaal bovenaan
var markers = [];
onderaan de pagina doe ik:
<script src='https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxx&callback=initMap'></script>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(51.605359, 4.162031),
zoom: 6,
mapTypeControl: false,
mapTypeId: "roadmap",
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
fullscreenControl: false,
disableDoubleClickZoom: true
}), homepage(), infoWindow = new google.maps.InfoWindow({
height: 320
})
}
function homepage()
{
var e = jQuery("#catid").val();
var t = jQuery("#catsubid").val();
var value = jQuery("#pc").val();
var straal = jQuery("#straal").val();
var path = jQuery("input[name=term]").val();
if (void 0 === value || "" === $.trim(value)) {
/** @type {string} */
value = "";
}
if (void 0 === path || "" === $.trim(path) || "[object%20HTMLInputElement]" == path) {
/** @type {string} */
path = "";
}
/** @type {string} */
var url = "<?=HTML_ROOT?>inc/phpsqlsearch_genxml.php?lat=52.0327092&lng=3.8593459&catid=" + e + "&catidsub=" + t + "&postcode=" + value + "&straal=" + straal + "&term=" + path;
downloadUrl(url, function(data) {
var document = parseXml(data);
var s = document.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds;
/** @type {number} */
var i = 0;
for (; i < s.length; i++)
{
var name = s[i].getAttribute("name");
var type = s[i].getAttribute("img");
var green = s[i].getAttribute("plaats");
var id = (s[i].getAttribute("provincie"), s[i].getAttribute("catnaam"));
var defVal = s[i].getAttribute("postcode");
/** @type {number} */
var index = parseFloat(s[i].getAttribute("distance"));
var endColorCoords = s[i].getAttribute("id");
var currentHash = s[i].getAttribute("num");
var latlng = new google.maps.LatLng(parseFloat(s[i].getAttribute("lat")), parseFloat(s[i].getAttribute("lng")));
// MAKER
createMarker(latlng, name, green, type, endColorCoords);
bounds.extend(latlng);
} // end for
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
markerClusterer = new MarkerClusterer(map, markers, {
imagePath: "<?=HTML_ROOT?>images/markers/cluster/m"
}) // end download
});
}
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(51.605359, 4.162031),
zoom: 6,
mapTypeControl: false,
mapTypeId: "roadmap",
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
fullscreenControl: false,
disableDoubleClickZoom: true
}), homepage(), infoWindow = new google.maps.InfoWindow({
height: 320
})
}
function homepage()
{
var e = jQuery("#catid").val();
var t = jQuery("#catsubid").val();
var value = jQuery("#pc").val();
var straal = jQuery("#straal").val();
var path = jQuery("input[name=term]").val();
if (void 0 === value || "" === $.trim(value)) {
/** @type {string} */
value = "";
}
if (void 0 === path || "" === $.trim(path) || "[object%20HTMLInputElement]" == path) {
/** @type {string} */
path = "";
}
/** @type {string} */
var url = "<?=HTML_ROOT?>inc/phpsqlsearch_genxml.php?lat=52.0327092&lng=3.8593459&catid=" + e + "&catidsub=" + t + "&postcode=" + value + "&straal=" + straal + "&term=" + path;
downloadUrl(url, function(data) {
var document = parseXml(data);
var s = document.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds;
/** @type {number} */
var i = 0;
for (; i < s.length; i++)
{
var name = s[i].getAttribute("name");
var type = s[i].getAttribute("img");
var green = s[i].getAttribute("plaats");
var id = (s[i].getAttribute("provincie"), s[i].getAttribute("catnaam"));
var defVal = s[i].getAttribute("postcode");
/** @type {number} */
var index = parseFloat(s[i].getAttribute("distance"));
var endColorCoords = s[i].getAttribute("id");
var currentHash = s[i].getAttribute("num");
var latlng = new google.maps.LatLng(parseFloat(s[i].getAttribute("lat")), parseFloat(s[i].getAttribute("lng")));
// MAKER
createMarker(latlng, name, green, type, endColorCoords);
bounds.extend(latlng);
} // end for
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
markerClusterer = new MarkerClusterer(map, markers, {
imagePath: "<?=HTML_ROOT?>images/markers/cluster/m"
}) // end download
});
}
CreateMarker maakt netjes de markers aan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
function createMarker(latlng, index, type, src, name) {
var pinImage = src.replace("markern_", "markerm_");
/** @type {string} */
var path = src;
/** @type {string} */
var name = name; //console.log(name);
var marker = new google.maps.Marker({
map : map,
position : latlng,
icon : src
});
markers.push(marker);
}
var pinImage = src.replace("markern_", "markerm_");
/** @type {string} */
var path = src;
/** @type {string} */
var name = name; //console.log(name);
var marker = new google.maps.Marker({
map : map,
position : latlng,
icon : src
});
markers.push(marker);
}
Deze komen dus netjes met clusers op de map
Als ik een radius via een select doe:
Code (php)
1
2
3
4
5
2
3
4
5
jQuery(document).on("change", ".opradius", function(a)
{
searchLocationsNear();
});
{
searchLocationsNear();
});
alert markers is 0. Dus hij haalt ze weg.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
function searchLocationsNear(e,radius) { // niet home
{
for (var k = 0; k < markers.length; k++) {
markers[k].setMap(null);
}
markers = [];
alert(markers.length);
}
{
for (var k = 0; k < markers.length; k++) {
markers[k].setMap(null);
}
markers = [];
alert(markers.length);
}
Snap er niks van, ik heb met adnere sites nooit problemen gehad in het verleden met markers te verwijderen/verbergen op deze manier.
Ik zie in de console dit:
DevTools failed to parse SourceMap: http://localhost/sm/3a884fe0bdb97cb3a94b410e67cf38fdc248890d5581232077b3e6241e25cd21.map
DevTools failed to parse SourceMap: http://localhost/test/js/bootstrap-select.js.map
VErder geen foutmledingen, de radius circle word ook gemaakt en de markers ook, maar ik krijg de markers niet meer weg???
Gewijzigd op 04/04/2020 04:08:07 door Daniel van Seggelen
En tegenwoordig hebt je een "payment plan" nodig als je de API's van Google wilt gebruiken, ook al ben je geen grootverbruiker en kom je niet boven het aantal API-calls uit waar je voor zou moeten betalen.
De Hele api werkt gewoon lokaal wel degelijk. Ik heb een officiele API key met paymentplan.
Ik zie de markers gewoon etc.
Het enige wat niet werkt is dat ik de merkers niet wegkrijg. Ook geen foutmeldingen etc. Heel erg vreemd. Ga het even met ff proberen.
Toevoeging op 04/04/2020 06:35:11:
Hele sipele oplossng:
Dit moet erbij
Code (php)
1
markerClusterer.clearMarkers();
ALs je de clusters niet leeg haalt en je klikt erop dan worden de markers weer getoond, oom al verwijder je deze. met markerClusterer.clearMarkers(); zijn ze ook echt weg.
Gewijzigd op 04/04/2020 04:06:00 door Daniel van Seggelen