2016-11-14 12 views
0

GoogleプレイスAPIをプレイスライブラリとともに使用すると、推奨方法(here)を使用して付近の学校を表示できます。ここでGoogle Places APIで学校と店舗を表示

var map; 
var infowindow; 

function initMap() { 
    var pyrmont = {lat: -33.867, lng: 151.195}; 

    map = new google.maps.Map(document.getElementById('map'), { 
    center: pyrmont, 
    zoom: 15 
    }); 

    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch({ 
    location: pyrmont, 
    radius: 500, 
    type: ['store'] 
    }, callback); 
} 

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

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
} 

は作業フィドルです:https://jsfiddle.net/api/post/library/pure/

問題は、私は、近くの店舗だけでなく、学校を表示したい場合は、誰もが簡単にこれを行うことをお勧めしているようだということです。

type: ['store', 'school'] 

ながらこれは技術的にはうまくいきますが、問題はマップが意味のないデフォルトマーカの束を示していて、それが何であるかを知る方法がないことです。

私の質問は:どのように学校や店舗のアイコンを変更できますか?理想的には、それぞれのタイプごとに異なるアイコンを表示します。

答えて

1

それは通常のmap.Onlyの事でカスタムマーカーを追加するよりも違いませんが、あなたが各type。だからもtype: ['store', 'school']がうまくいくためのAPIを個別に呼び出しを行う必要があり、結果を得るが、伝えるためにresultsには型指定がないことですそれはあなたが

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
     icon:"http://example.com/icon.png", //<-- only this line is enough for icon 
     map: map, 
     position: place.geometry.location 
    }); 

彼らの別のアイコンを設定するための彼らの別々のコールバックを作成する必要があります.Also学校や商店のかどうか。また、すべての結果が0として(デフォルトのアイコンが表示されますより良い理解

ためthisを経ますプロパティ)も使用できます。

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

完全に感謝します。 – user3256143