Javascript 多个谷歌地图标记
下面的代码在Oracle APEX应用程序的HTML区域中正确呈现Google地图。但所有地图位置都有相同的标记图标。如何使“扁平岩石”的标记与其他3个标记不同Javascript 多个谷歌地图标记,javascript,google-maps-api-3,Javascript,Google Maps Api 3,下面的代码在Oracle APEX应用程序的HTML区域中正确呈现Google地图。但所有地图位置都有相同的标记图标。如何使“扁平岩石”的标记与其他3个标记不同 jQuery(function($) { // Asynchronously Load the map API var script = document.createElement('script'); script.src = "http://maps.googleapis.com/maps/api/js?
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
['Flat Rock', 43.649099,-71.327217,'#APP_IMAGES#darkgreen_MarkerF.png'],
['19-Mile Bay', 43.647613, -71.278181],
['Little Bear Island', 43.641296, -71.323596],
['Trexlers Marina', 43.667654, -71.349013]
];
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Flat Rock</h3>' +
'<p>Flat Rock of Wellswood is located on East Point of Long Island, Lake Winnipesaukee.</p>' + '</div>'],
['<div class="info_content">' +
'<h3>19-Mile Bay</h3>' +
'<p>19-Mile Bay docks and store. A great place to fill up your boat gas tank and cool off with some fresh ice cream!</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Little Bear Island</h3>' +
'<p>Off its western and southern shores are great fishing spots for salmon in the early spring.</p>' +
'</div>']
['<div class="info_content">' +
'<h3>Trexlers Marina</h3>' +
'<p>Boat rentals and gas.</p>' +
'</div>']
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: markers[i][3]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(13);
google.maps.event.removeListener(boundsListener);
});
}
jQuery(函数($){
//异步加载映射API
var script=document.createElement('script');
script.src=”http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(脚本);
});
函数初始化(){
var映射;
var bounds=new google.maps.LatLngBounds();
变量映射选项={
mapTypeId:“路线图”
};
//在页面上显示地图
map=new google.maps.map(document.getElementById(“map_canvas”),mapOptions);
地图.设置倾斜(45);
//多重标记
变量标记=[
['FlatRock',43.649099,-71.327217',#APP#u IMAGES#darkgreen_MarkerF.png'],
['19英里湾',43.647613,-71.278181],
[《小熊岛》,43.641296,-71.323596],
[Trexlers Marina',43.667654,-71.349013]
];
//信息窗口内容
var infoWindowContent=[
['' +
“扁平岩石”+
“威尔斯伍德的平坦岩石位于温尼伯索基湖长岛的东点。”+“”,
['' +
“19英里湾”+
“19英里湾码头和仓库。这是一个很好的地方,可以给你的船加满油箱,然后用新鲜的冰激凌降温!”+
''],
['' +
“小熊岛”+
“其西部和南部海岸是早春大马哈鱼的绝佳渔场。”
'']
['' +
“特雷克斯勒码头”+
“租船和加油。”+
'']
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow(),marker,i;
//在我们的标记阵列中循环并将每个标记放置在地图上
对于(i=0;i
在标记数组中添加图像名称:
var markers = [
['Flat Rock', 43.649099,-71.327217,'img1.png'],
['19-Mile Bay', 43.647613, -71.278181,'img2.png'],
['Little Bear Island', 43.641296, -71.323596,'img3.png'],
['Trexlers Marina', 43.667654, -71.349013,'img4.png']
以及:
请参见Thierry,我的解决方案与您的解决方案非常相似,它允许我将特定图标图像指定给一个位置,并默认为其他位置。非常感谢。
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: 'url_for_images/' + markers[i][3]
});