Google Maps API v3 Özel Simgelerle İlgi Çekici Noktalar

Question

Belirli bir alandaki okullarda, kiliselerde ve parklarda bir sayfam var, ancak 3 farklı simgeyle 3 özel hedefe stil uygulamak istiyorum. Google’ı ve hatta tüm dokümanları aradım ancak cevabı bulamadım.

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

Lütfen hızlı ve kirli Demo numaralı telefonuma bakın. Buradaki fikir, haritaya eklemek istediğiniz yeri belirlemek için place.types dizisini kullanmaktır. Ben basitçe böyle bir şey olabilir bu dizide (genellikle 2 veya 3 ürün uzunluğunda) birinci öğesi üzere işaretleyici atanan: Bazı durumlarda

["school", "establishment"] 

, "üniversite" öylesine "okul" önce "üniversite geliyor "simge kullanıldı. Çeşitleri simgelerle eşleştirmeyi, yani okul veya üniversiteye öncelik vermeyi nasıl iyileştireceksin? Belki doğru türleri arayan dizi boyunca yineleyin. Bir yer (general_contractor) simgeler listemde değil, bu yüzden varsayılan pin işareti oraya yerleştirilir. iconType'un aslında istenen türde olup olmadığını kontrol ederseniz, bir "varsayılan" simgesi kullanılabilir. Alternatif 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); 
    }); 
} 

bir geçiş deyimi kullanarak: Ben burada

var) = size ben simgeler için kullanılan kaynak bu ayrıntıları bırakacağım

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