样式化地图和地点库Google Map API v3
styled maps and places library Google Map API v3
如何从Google Places库中获得结果,以显示在我的风格谷歌地图上?有了这段代码,我只得到了样式化的地图,没有位置。
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=true">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<script type="text/javascript">
function initialize() {
var styles = [ { featureType: "road.arterial", elementType: "geometry", stylers: [ { color: "#808080" }, { weight: 0.5 } ] },{ featureType: "road.arterial", elementType: "labels.text.stroke", stylers: [ { visibility: "on" }, { color: "#fafafa" } ] },{ featureType: "water", elementType: "geometry", stylers: [ { color: "#b4d2fa" } ] },{ featureType: "water", elementType: "geometry.fill", stylers: [ { color: "#9c3239" } ] } ]
var styledMap = new google.maps.StyledMapType(styles,
{name: "WATS Map"});
var myLatLng = new google.maps.LatLng(42.3068, -83.681)
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var request = {
location: myLatLng,
radius: 1500,
types: ['store']
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, 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: styledMap,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(styledMap, this);
});
}
</script>
您必须将变量map
设置为全局变量,并将map
分配给createMarker()
中标记的映射选项
目前您使用的是styledMap
,但这不是一个映射对象,它是一个StyledMapType
相关文章:
- 回调函数中传递参数的困难(Google Map API Markers)
- 使用API在我的网站Google-Map上显示搜索地址的纬度和经度
- 通过内部数组将JSON数据导入D3.js+Google Map
- 没有显示带有Infobox PHP/SQL的Google Map API v3
- 在javascript函数中访问Google map api
- Google Map API BackBoneJS 无法读取 null 的属性 'offsetWidth'
- Google Map KML层占位符点击事件返回ZERO_RESULTS
- Google Map JS API-加载地图分幅,但所有图像(标记、缩放控制等)都不加载;t负载2分钟
- Google MAP API 未捕获类型错误:无法读取 null 的属性“offsetWidth”
- jQuery在使用Bootstrap 3的Google Map v3的信息窗口中工作不完美
- 将Jquery拖放到Google Map V3
- Angular Google Map的自定义样式
- 样式化地图和地点库Google Map API v3
- 在Google Map API中定位画布外的输入字段
- Google Map API v3 在 Wordpress 中不起作用
- Google Map API use LatLng or Address
- SetTimeout on Directionservice route in google map javascrip
- Google Map API - foreach 循环中的信息窗口
- 将 MarkerClusterer 与数据库驱动的 Google Map V3 集成
- javascript google map setcenter and setzoom with animation