谷歌地圖定位器

Question

由於某些原因，當我嘗試添加定型器以定製我的Google地圖的顏色時，此代碼會中斷，有人能指出我朝着正確的方向嗎？我究竟做錯了什麼？

function initialize() { 

var centerMap = new google.maps.LatLng(52.204872,0.120163); 

var myOptions = { 
    zoom: 12, 
    center: centerMap, 
    scrollwheel: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    var style= [ 
     { 
     "stylers": [ 
      { "saturation": 100 }, 
      { "lightness": 31 }, 
      { "hue": "#ff6600" }, 
      { "gamma": 0.9 } 
     ] 
     },{ 
     },{ 
     } 
    ] 
} 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

setMarkers(map, sites); 
infowindow = new google.maps.InfoWindow({ 
     content: "loading..." 
    }); 

var bikeLayer = new google.maps.BicyclingLayer(); 
bikeLayer.setMap(map); 
} 

var sites = [ 
['The Frontroom', 52.202977,0.138938, 1, 'The Frontroom.'], 
['Fitzwilliam Museum',52.199678,0.119931, 2, 'Fitzwilliam Museum'], 
['Wysing Arts centre', 52.182077,-0.06977, 3, 'Wysing Arts Centre'], 
['Cambridge School of Art', 52.203825,0.134808, 4, 'Cambridge School of Art'], 
['Kettles yard', 52.210851,0.114637, 5, 'Kettles Yard'], 
['Changing Spaces',52.199678,0.119931, 6, 'Changing Spaces'], 
['Aid & Abet', 52.195218,0.136578, 7, 'Aid & Abet'], 
['The Junction', 52.190756,0.136522, 8, 'The Junction'] 
]; 



function setMarkers(map, markers) { 

for (var i = 0; i < markers.length; i++) { 
    var sites = markers[i]; 
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
    var marker = new google.maps.Marker({ 
     position: siteLatLng, 
     map: map, 
     title: sites[0], 
     zIndex: sites[3], 
     html: sites[4] 
    }); 

    var contentString = "Some content"; 

    google.maps.event.addListener(marker, "click", function() { 
     infowindow.setContent(this.html); 
     infowindow.open(map, this); 
    }); 
} 
} 

Answer 1

我設法解決我到底自我，我的風格正確的代碼：

function initialize() { 
var styles = [ 
    { 
    stylers: [ 
     { hue: '#F2846A' }, 
     { saturation: 80 } 
    ] 
    },{ 
    featureType: 'road', 
    elementType: 'geometry', 
    stylers: [ 
     { lightness: 100 }, 
     { visibility: 'simplified' } 
    ] 
    },{ 
    featureType: 'road', 
    elementType: 'labels', 
    stylers: [ 
     { visibility: 'off' } 
    ] 
    } 
]; 

var mapOptions = { 
    zoom: 12, 
    center: new google.maps.LatLng(52.204872,0.120163), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    styles: styles, 
    scrollwheel: false 
}; 

var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 

setMarkers(map, sites); 
infowindow = new google.maps.InfoWindow({ 
     content: "loading..." 
    }); 

var bikeLayer = new google.maps.BicyclingLayer(); 
bikeLayer.setMap(map); 

} 

var sites = [ 
['The Frontroom', 52.202977,0.138938, 1, 'The Frontroom.'], 
]; 



function setMarkers(map, markers) { 

for (var i = 0; i < markers.length; i++) { 
    var sites = markers[i]; 
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
    var marker = new google.maps.Marker({ 
     position: siteLatLng, 
     map: map, 
     title: sites[0], 
     zIndex: sites[3], 
     html: sites[4] 
    }); 

    var contentString = "Some content"; 

    google.maps.event.addListener(marker, "click", function() { 
     infowindow.setContent(this.html); 
     infowindow.open(map, this); 
    }); 
} 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 2

你有myOptions陣列（在var風格前）中存在的問題，這裏是你需要的東西：

var myOptions = { 
    zoom: 12, 
    center: centerMap, 
    scrollwheel: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    [ 
     { 
     "stylers": [ 
      { "saturation": 100 }, 
      { "lightness": 31 }, 
      { "hue": "#ff6600" }, 
      { "gamma": 0.9 } 
     ] 
     },{ 
     },{ 
     } 
    ] 
}; 

Answer 3

你myOptions格式應爲如下（見原詞「風格」之後，部分：

var myOptions = { 
    zoom: 12, 
    center: centerMap, 
    scrollwheel: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    styles: [ 
     { 
     "stylers": [ 
      { "saturation": 100 }, 
      { "lightness": 31 }, 
      { "hue": "#ff6600" }, 
      { "gamma": 0.9 } 
     ] 
     },{ 
     },{ 
     } 
    ] 
} 

我也轉移了一些東西。這裏有一個可用的JSFiddle：http://jsfiddle.net/VX8TJ/