無法在Google地圖上放置自定義標記

Question

我設法讓我的地圖需求使用腳本，但我無法設置自定義標記。

在這裏我有什麼

HTML：

<div id="map_wrapper"> 
    <div id="map_canvas" class="mapping"></div> 
</div> 

CSS：

#map_wrapper { 
    height: 400px; 
} 

#map_canvas { 
    width: 100%; 
    height: 100%; 
} 

JS：

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 = [ 
    ['London Eye, London', 51.503454, -0.119562], 
    ['Palace of Westminster, London', 51.499633, -0.124755] 
    ]; 

    // Info Window Content 
    var infoWindowContent = [ 
    ['<div class="info_content">' + 
     '<h3>London Eye</h3>' + 
     '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>' 
    ], 
    ['<div class="info_content">' + 
     '<h3>Palace of Westminster</h3>' + 
     '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</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] 
    }); 

    // 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(14); 
    google.maps.event.removeListener(boundsListener); 
    }); 

} 

所以一切正常，但我需要自定義標記圖片。有人可以幫助我呢？

Answer 1

在生成標記時，您可以設置圖標。我不看到你正在嘗試，但你可以這樣來做：

定義圖標：

var icon = { 
       url: "/myIcon.png", // url 
       scaledSize: new google.maps.Size(30, 30), // scaled size 
       origin: new google.maps.Point(0, 0), // origin 
       anchor: new google.maps.Point(0, 0) // anchor 
      }; 

然後當你創建標記做：

var marker = new google.maps.Marker({ 
     position: {lat: lat, lng: lng}, 
     icon: icon, 
     map: map 
    }); 

你應該閱讀文檔：https://developers.google.com/maps/documentation/javascript/reference

請讓我知道，如果它是你所期望的。