title: add custom icons to google maps nearby places part2
body: <p>got my current location with nearby places eg.(grocery_or_supermarket) and their icons.</p>
  
  <p>but what i want to do is give each of the shops their own logo as an icon.</p>
  
  <p>I'm new to JS so any help plz!</p>
  
  <p>I have code to share if needed.</p>
  
  <pre><code> &lt;script&gt;
      var infowindow,
       placemarkers = [];
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var icons = {
          parking: {
              icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
              icon: iconBase + 'library_maps.png'
          },
          info: {
              icon: iconBase + 'info-i_maps.png'
          },
          grocery_or_supermarket: {
              icon: iconBase + 'convenience.png'
          }
      };
  
      function placeSearch(map, request) {
          var map = map;
          var service = new google.maps.places.PlacesService(map);
          service.search(request,
  
          function (results, status) {
              if (status == google.maps.places.PlacesServiceStatus.OK) {
                  var bounds = new google.maps.LatLngBounds();
                  for (var i = 0; i &lt; results.length; ++i) {
                      bounds.extend(results[i].geometry.location);
                      placemarkers.push(createMarker(results[i].geometry.location,
                      map,
                      icons['grocery_or_supermarket'].icon,
                      results[i].name,
                      false, {
                          fnc: function () {
                              infowindow.open();
                          }
  
                      }));
                  }
                  map.fitBounds(bounds);
              }
          });
  
      }
  
      function createMarker(latlng, map, icon, content, center, action) {
  
          var marker = new google.maps.Marker({
              map: map,
              animation: google.maps.Animation.DROP,
              position: latlng,
              content: content
          });
          ////////toggle bounce////
          google.maps.event.addListener(marker, 'click', toggleBounce);
  
          function toggleBounce() {
  
              if (marker.getAnimation() != null) {
                  marker.setAnimation(null);
              } else {
                  marker.setAnimation(google.maps.Animation.BOUNCE);   } } ///////bounce end////
  
          if (icon) {
              marker.setIcon(icon);
          }
  
          if (center) {
              map.setCenter(latlng);
          }
  
          google.maps.event.addListener(marker, 'click', function () {
              infowindow.setContent(this.content);
              infowindow.open(map, this);
          });
  
          if (action) {
              action.fnc(map, action.args);
          }
          return marker;
      }
  
      function initialize() {
  
          var location = new google.maps.LatLng(-33.8665433, 151.1956316),
              map = new google.maps.Map(document.getElementById('map'), {
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  center: location,
                  zoom: 15,
              });
  
  
          infowindow = new google.maps.InfoWindow();
          navigator.geolocation.getCurrentPosition(function (place) {
              createMarker(
              new google.maps.LatLng(place.coords.latitude,
              place.coords.longitude),
              map,
              null,
                  'your current position',
              true, {
                  fnc: placeSearch,
                  args: {
                      radius: 5000,
                      types: ['grocery_or_supermarket'],
                      location: new google.maps.LatLng(place.coords.latitude,
                      place.coords.longitude)
                  }
              });
          });
      }
  
      &lt;/script&gt;
  </code></pre>