All geek questions in one place

Google Maps API, hide / show tokens

I am new to JavaScript, but this problem drove me crazy for two days and I cannot find anyone with the same problem as mine.

I am trying to add a button to hide all markers on my map (in the end I want to do this in order to hide markers by category, but hide all markers at the moment) I use the code from the Google developers website.

Here is my code

var map; var service; var infowindow; function initialize() { var pyrmont = new google.maps.LatLng(49.2755189938682, -123.1185996613159); map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: pyrmont, zoom: 17 }); var request = { location: pyrmont, radius: '500', types: ['atm','bus_station','parking'] }; infowindow = new google.maps.InfoWindow(); service = new google.maps.places.PlacesService(map); service.nearbySearch(request, callback); TestMarker(); } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; createMarker(results[i]); } } } function TestMarker() { CentralPark = new google.maps.LatLng(49.2755189938682, -123.1185996613159); addMarker(CentralPark); } function addMarker(location) { marker = new google.maps.Marker({ position: location, map: map, icon: "http://maps.google.com/mapfiles/ms/micons/POI.png", title: 'Sues Party, Idaburn Salon' }); } function createMarker(place) { var iconType = {}; iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png"; iconType['bus_station'] = "http://maps.google.com/mapfiles/ms/micons/bus.png"; //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png"; iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png"; var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, icon: iconType[place.types[0]], position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); } google.maps.event.addDomListener(window, 'load', initialize);

I added a button to call function , but I think the problem is getting the records from the array. Really stuck, any help is much appreciated. Even advice on what I need to do to make it work

James

+4
source share
2 answers

James. Try this code:

 <html> <head> <title></title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=adsense,places"></script> <script type="text/javascript"> var map; var service; var infowindow; var markers = []; function initialize() { var pyrmont = new google.maps.LatLng(49.2755189938682, -123.1185996613159); map = new google.maps.Map(document.getElementById('map'), { mapTypeId : google.maps.MapTypeId.ROADMAP, center : pyrmont, zoom : 17 }); var request = { location : pyrmont, radius : '500', types : ['atm', 'bus_station', 'parking'] }; infowindow = new google.maps.InfoWindow(); service = new google.maps.places.PlacesService(map); service.nearbySearch(request, callback); TestMarker(); var removeBtn = document.getElementById("removeBtn"); google.maps.event.addDomListener(removeBtn, "click", onRemoveBtn_Clicked); } function onRemoveBtn_Clicked() { var i; for (i = 0; i < markers.length; i++) { markers[i].setMap(null); } } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; markers.push(createMarker(results[i])); } } } function TestMarker() { CentralPark = new google.maps.LatLng(49.2755189938682, -123.1185996613159); markers.push(addMarker(CentralPark)); } function addMarker(location) { marker = new google.maps.Marker({ position : location, map : map, icon : "http://maps.google.com/mapfiles/ms/micons/POI.png", title : 'Sues Party, Idaburn Salon' }); return marker; } function createMarker(place) { var iconType = {}; iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png"; iconType['bus_station'] = "http://maps.google.com/mapfiles/ms/micons/bus.png"; //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png"; iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png"; var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map : map, icon : iconType[place.types[0]], position : place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); return marker; } google.maps.event.addDomListener(window, 'load', initialize); </script> <style type="text/css"> code.prettyprint { display: block; border: 1px solid #ccc; margin-bottom: 1em; } #map { width: 100%; height: 500px; margin: 0; } </style> </head> <body> <input type="button" id="removeBtn" value="Remove all markers" /> <div id="map"></div> </body> </html>
+3
source

all you have to do is create a global variable to save all markers. Add them one at a time from the result, and you can show / hide them all. For instance:

 <script type="text/javascript"> var markers = []; function HideAllMarkers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } } function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; createMarker(results[i],i); } } } function createMarker(place, index) { var iconType = {}; iconType['atm'] = "http://maps.google.com/mapfiles/ms/micons/dollar.png"; iconType['bus_station'] = "http://maps.google.com/mapfiles/ms/micons/bus.png"; //iconType['restaurant'] = "http://maps.google.com/mapfiles/ms/micons/restaurant.png"; iconType['parking'] = "http://maps.google.com/mapfiles/ms/micons/parkinglot.png"; var placeLoc = place.geometry.location; markers[index] = new google.maps.Marker({ map: map, icon: iconType[place.types[0]], position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(place.name); infowindow.open(map, this); }); } </script>

If you want to show all markers, you must do the following:

 <script type="text/javascript"> function ShowAllMarkers() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(map); } } </script>
+1
source

Source: https://habr.com/ru/post/1447119/

More articles:


All Articles