API Google Maps v3 Điểm ưa thích với các biểu tượng tùy chỉnh

Question

Tôi có một trang kéo vào trường học, nhà thờ và công viên của khu vực đã cho nhưng tôi muốn tạo kiểu cho 3 POI với 3 biểu tượng khác nhau. Tôi đã tìm kiếm trên Google và thậm chí tất cả tài liệu nhưng không thể tìm thấy câu trả lời.

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

Vui lòng xem nhanh và bẩn Demo. Ý tưởng là sử dụng mảng place.types để xác định loại địa điểm bạn đang cố thêm vào bản đồ. Tôi cách đơn giản gán một đánh dấu vào mục đầu tiên của mảng này (dài thường là 2 hoặc 3 bài), có thể là một cái gì đó như:

["school", "establishment"] 

Trong một số trường hợp, "trường đại học" đi trước "trường học" do đó, một "đại học "biểu tượng được sử dụng. Bạn sẽ muốn tinh chỉnh cách bạn kết hợp các loại biểu tượng, tức là ưu tiên cho trường học hoặc đại học? Có lẽ lặp qua mảng tìm kiếm đúng loại. Một nơi (general_contractor) không có trong danh sách biểu tượng của tôi, vì vậy điểm đánh dấu ghim mặc định được đặt ở đó. Biểu tượng "mặc định" có thể được sử dụng nếu bạn đã kiểm tra nếu iconType thực tế có hay không loại mong muốn. Tôi sẽ để lại những chi tiết này cho bạn =)

Đây là nguồn tôi đã sử dụng cho các biểu tượng: 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); 
    }); 
} 

Ngoài ra, sử dụng một câu lệnh 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); 
    }); 
}