谷歌地圖API v3自定義圖標的興趣點

Question

我有一個頁面拉動我所在地區的學校，教堂和公園，但我想用3個不同的圖標設計3個興趣點。我搜索了Google甚至所有的文檔，但都找不到答案。

var map; 
var infowindow; 

function initialize() { 

    // Center of Map 
    var centerLatlng = new google.maps.LatLng(29.745376, -95.380125); 

    // Marker Icons Declaration 
    var icon = new google.maps.MarkerImage("smLinks-twitter.png", null, null, new google.maps.Point(41,47)); 

    // Map Options 
    var myOptions = { 
    zoom: 16, 
    center: centerLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    icons: icon 
    }; 

    // Draw the map 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Marker Icons Implementation 
    markers = new google.maps.Marker({ 
    position: centerLatlng, 
    map: map, 
    title: 'Center of Map', 
    icon: icon 
    }); 

    // Services: Places 
    var request = { 
    location: centerLatlng, 
    radius: 800, 
    types: ["school", "church", "park"] 
    }; 
    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.search(request, callback); 

} // function initialize() 

function callback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
    } 
    } 
} 

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location, 
    icon: icon 
    }); 
    google.maps.event.addListener(marker, 'mouseover', function() { 
    infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">'); 
    infowindow.open(map, this); 
    }); 
} 

Answer 1

請參閱我的快速和骯髒的Demo。這個想法是使用place.types數組來確定你試圖添加到地圖的地點。我簡單地分配一個標記，以這種陣列（通常爲2個或3項長）的第一項，其可以是這樣的：

["school", "establishment"] 

在一些情況下，「大學」自帶「學校」之前，所以一個「大學「圖標被使用。你會想改進你將類型匹配到圖標的方式，也就是說，優先考慮學校或大學？也許遍歷數組尋找正確的類型。一個地方（general_contractor）不在我的圖標列表中，所以默認的引腳標記放置在那裏。如果您選中iconType實際上是否具有所需的類型，則可以使用「默認」圖標。我將離開這些細節給你=）

下面是我用圖標來源：https://sites.google.com/site/gmapsdevelopment/

function createMarker(place) { 
    var placeLoc = place.geometry.location; 

    var iconType = {}; 
    iconType['school'] = "http://maps.google.com/mapfiles/kml/pal2/icon2.png"; 
    iconType['church'] = "http://maps.google.com/mapfiles/kml/pal2/icon11.png"; 
    iconType['park'] = "http://maps.google.com/mapfiles/kml/pal2/icon12.png"; 
    iconType['university'] = "http://maps.google.com/mapfiles/kml/pal2/icon14.png"; 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
     icon: iconType[place.types[0]] 
    }); 

    google.maps.event.addListener(marker, 'mouseover', function() { 
     infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">'); 
     infowindow.open(map, this); 
    }); 
} 

另外，使用switch語句：

function createMarker(place) { 
    var placeLoc = place.geometry.location; 

    var iconUrl; 
    switch (place.types[0]) { 
    case 'school': 
     iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon2.png"; 
     break; 
    case 'church': 
     iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon11.png"; 
     break; 
    case 'park': 
     iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon12.png"; 
     break; 
    case 'university': 
     iconUrl = "http://maps.google.com/mapfiles/kml/pal2/icon14.png"; 
     break; 
    default: 
     iconUrl = "http://maps.google.com/mapfiles/kml/pal4/icon39.png"; 
    } 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
     icon: iconUrl 
    }); 

    google.maps.event.addListener(marker, 'mouseover', function() { 
     infowindow.setContent(place.name + '<br/>' + place.vicinity + '<br/><img src="' + place.icon + '">'); 
     infowindow.open(map, this); 
    }); 
}