多個Google地圖標記

Question

以下代碼可正確呈現Oracle APEX應用程序的HTML區域中的Google地圖。但是所有的地圖位置都有相同的標記圖標。我怎樣才能讓「平坦的岩石」的標記與其他3個標記不同？

jQuery(function($) { 
    // Asynchronously Load the map API 
    var script = document.createElement('script'); 
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
}); 

function initialize() { 
    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     mapTypeId: 'roadmap' 
    }; 

    // Display a map on the page 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    map.setTilt(45); 

// Multiple Markers 
var markers = [ 
    ['Flat Rock', 43.649099,-71.327217,'#APP_IMAGES#darkgreen_MarkerF.png'], 
    ['19-Mile Bay', 43.647613, -71.278181], 
    ['Little Bear Island', 43.641296, -71.323596], 
    ['Trexlers Marina', 43.667654, -71.349013] 
]; 

    // Info Window Content 
    var infoWindowContent = [ 
     ['<div class="info_content">' + 
     '<h3>Flat Rock</h3>' + 
     '<p>Flat Rock of Wellswood is located on East Point of Long Island, Lake Winnipesaukee.</p>' +  '</div>'], 
     ['<div class="info_content">' + 
     '<h3>19-Mile Bay</h3>' + 
     '<p>19-Mile Bay docks and store. A great place to fill up your boat gas tank and cool off with some fresh ice cream!</p>' + 
     '</div>'], 
     ['<div class="info_content">' + 
     '<h3>Little Bear Island</h3>' + 
     '<p>Off its western and southern shores are great fishing spots for salmon in the early spring.</p>' + 
     '</div>'] 
     ['<div class="info_content">' + 
     '<h3>Trexlers Marina</h3>' + 
     '<p>Boat rentals and gas.</p>' + 
     '</div>'] 
     ]; 

    // Display multiple markers on a map 
    var infoWindow = new google.maps.InfoWindow(), marker, i; 

// Loop through our array of markers & place each one on the map 
for(i = 0; i < markers.length; i++) { 
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
    bounds.extend(position); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: markers[i][0], 
     icon: markers[i][3] 
    }); 

     // Allow each marker to have an info window  
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent(infoWindowContent[i][0]); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i)); 

     // Automatically center the map fitting all markers on the screen 
     map.fitBounds(bounds); 
    } 

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
     this.setZoom(13); 
     google.maps.event.removeListener(boundsListener); 
    }); 
} 

Answer 1

在您的標記陣列添加圖像名稱：

var markers = [ 
     ['Flat Rock', 43.649099,-71.327217,'img1.png'], 
     ['19-Mile Bay', 43.647613, -71.278181,'img2.png'], 
     ['Little Bear Island', 43.641296, -71.323596,'img3.png'], 
     ['Trexlers Marina', 43.667654, -71.349013,'img4.png'] 

和：

marker = new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: markers[i][0], 
      icon: 'url_for_images/' + markers[i][3] 
     }); 

見https://developers.google.com/maps/documentation/javascript/markers#icons