自定義Google地圖API「圖標」InfoWindows

我在自定義google地方API中的「clicked」infowindows時遇到了問題。我能夠使用api查找位置並自定義搜索到的信息窗口（圖1），但我似乎無法弄清楚如何自定義由位置圖標啓動的信息窗口（圖2）。自定義Google地圖API「圖標」InfoWindows

我道歉，我的問題的一部分是我不知道那些特定的信息窗口被稱爲什麼，如果我這樣做，我可能能夠搜索解決方案。看起來這個網站上的大多數問題都與定製搜索到的infoWindow內容有關，並且我已經成功地做到了這一點。

Searched Customized InfoWindow (image 1)

The InfoWindow that I want to customize and is launched by icons on the map (image 2)

來源

2017-02-25 Amanda Ki

那些被稱爲clickableIcons。從the documentation

clickableIcons |類型：布爾型
如果爲false，則地圖圖標不可點擊。地圖圖標代表興趣點，也稱爲興趣點。默認地圖圖標是可點擊的。

和：

getClickableIcons（） |返回值：布爾型
返回地圖圖標的可點擊性。地圖圖標代表興趣點，也稱爲興趣點。如果返回值爲true，那麼圖標可以在地圖上點擊。

爲了控制信息窗口，被打開停止默認的，作爲IconMouseEvent文檔中描述：

google.maps.IconMouseEvent對象規範

這個目的是在發送當用戶點擊地圖上的圖標時發生的事件。該地點的地點ID存儲在placeId成員中。 爲防止出現默認信息窗口，請在此事件上調用stop（）方法以防止它傳播。在Places API開發人員指南中瞭解有關地點ID的更多信息。

proof of concept fiddle

代碼片段：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var iw = new google.maps.InfoWindow(); 
 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    evt.stop() 
 
    if (evt.placeId) { 
 
     console.log(evt.placeId); 
 
     iw.setContent(evt.placeId); 
 
     iw.setPosition(evt.latLng); 
 
     iw.open(map); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="map_canvas"></div>

來源

2017-02-25 21:37:37 geocodezip

太感謝你了，那工作！還有一個簡單的問題，我可以在哪裏看到infoWindow中的可用詳細信息列表？你有我需要的「placeID」和「latLng」，但我也在尋找商業名稱，如果可能的話，也許是評級。 –

不僅如此，您需要製作[PlaceDetails]（https://developers.google.com/maps/documentation/javascript/places#place_details）請求。相關問題：[Google place Api PlaceDetails]（http://stackoverflow.com/questions/12580788/google-place-api-placedetails） – geocodezip

自定義Google地圖API「圖標」InfoWindows

回答

相關問題