google apiを使用して、スタイル付きのgooglemapにマーカーを表示させようとしています。
私がこのようにそれを試みるならば:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(51.49079, -0.10746),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new GMaps({
div: "#map1",
lat: 41.895465,
lng: 12.482324,
zoom: 1,
zoomControl : true,
zoomControlOpt: {
style : "SMALL",
position: "TOP_LEFT"
},
panControl : true,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
var styles = [
{
featureType: "road",
stylers: [
{ "hue": "#ff0000" },
{ "lightness": -11 },
{ "saturation": -5 }
]
}, {
featureType: "road",
stylers: [
{ "saturation": -26 }
]
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");
// Add 5 markers to the map at random locations
var southWest = new google.maps.LatLng(-31.203405, 125.244141);
var northEast = new google.maps.LatLng(-25.363882, 131.044922);
//var bounds = new google.maps.LatLngBounds(southWest, northEast);
//map.fitBounds(bounds);
var cities = [
{
name: 'London',
position: new google.maps.LatLng(51.49079,-0.10746),
info: 'Bewohner: 7,556,900'
},
{
name: 'Paris',
position: new google.maps.LatLng(48.856667,2.350987),
info: 'Bewohner: 2,193,031'
},
{
name: 'Berlin',
position: new google.maps.LatLng(52.523405,13.4114),
info: 'Bewohner: 3,439,100'
}
];
cities.forEach(function(element, index, array) {
var marker = new google.maps.Marker({
position: element.position,
map: map[0],
title: element.name
});
var infoWindow = new google.maps.InfoWindow({
content: element.info
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
ファイアバグでエラーは発生しませんが、マーカーが表示されません。
これを変更した場合:
var marker = new google.maps.Marker({
position: element.position,
map: map[0],
に
map: map,
プロパティマップに無効な値があるというエラーメッセージが表示されます。
私のコードのエラーはどこにありますか?
ありがとう!