CODEWITHSUNDEEP
jquerygoogle-maps-api-3google-maps-markers
jamesteague
jamesteague

Reputation: 47

Google Maps API, hide/show markers

I am new to JavaScript but this problem has been driving me crazy for two days and I cant find anyone with the same problem as mine.

I am trying to add a button to hide all of the markers on my map (eventually I want to make it so that I hide the markers by category, but hiding all markers for the moment will do) I am using 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 have added a button to call a function, but I think the problem is getting the records from the array. Really stuck, any help is greatly appreciated. Even advice on what I need to be doing to get it to work

James

Upvotes: 4

Views: 7550

Answers (2)

Adit
Adit

Reputation: 134

all you need to do is creating a global variable to save all the markers. Add them one by one from the result and you can show/hide them all. For example:

<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 of the markers, then you should do the following:

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

Upvotes: 1

wf9a5m75
wf9a5m75

Reputation: 6158

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>

Upvotes: 3

Related Questions