添加自定義圖標到谷歌地圖附近的地方part2

Question

得到我當前的位置與附近的地方，如。（grocery_or_supermarket）和他們的圖標。

但我想要做的是給每個商店自己的標誌作爲一個圖標。

我是新來的JS，所以任何幫助PLZ！

我有代碼可以共享，如果需要的話。

<script> 
    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 < 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) 
       } 
      }); 
     }); 
    } 

    </script> 

Answer 1

您可以輕鬆地沒有那麼多的代碼做：

var iconBase = 'http://www.yourwebsite.com/'; 
var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: iconBase + 'myMarker.png' // Set yourt marker here 
}); 

這裏更多的是谷歌地圖和圖標。 https://developers.google.com/maps/tutorials/customizing/custom-markers

幾乎同樣的問題，也許可以幫助你： How to change icon on Google map marker