自定义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

回答

相关问题