繪製矩形

Question

我有一個項目，我想在世界地圖上劃分規則的網格然後突出顯示該網格

我已經設法成功地破解一個例子來的某些部分吸取谷歌的世界地圖

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 1, 
    center: {lat: 60.18, lng: 24.93}, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 

var rectangle = new google.maps.Rectangle({ 
strokeColor: '#FF0000', 
strokeOpacity: 0.8, 
strokeWeight: 2, 
fillColor: '#FF0000', 
fillOpacity: 0.35, 
map: map, 
bounds: { 

    west: 180, north:0, east: -160, south: 20 
} 
});  

initMap(); 

http://jsfiddle.net/6zea831p/4/

於20×矩形但我想變成一個功能那麼多的矩形可以根據我的腳本的其他部分高亮顯示。儘管我把它變成一個函數並沒有太大的成功。這是我開始

function drawRec(w, n, e, s){ 


var coords = new google.maps.LatLngBounds(
     new google.maps.LatLng(w, n), 
     new google.maps.LatLng(e, s)) 

var rectangle = new google.maps.Rectangle({ 
    strokeColor: ' #ff00ff', 
    strokeOpacity: 0.8, 
    strokeWeight: 1, 
    fillColor: ' #ff00ff', 
    fillOpacity: 0.35, 

    bounds: coords, 

    map: map 

    }); 



} 

我得到的錯誤控制檯「InvalidValueError：沒有地圖的一個實例：調用setMap」。

Answer 1

聲明外的「地圖」變種「initMap（）」功能，使之在你的腳本標籤

var map; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    ... 
    ... 
} 

function drawRec(w, n, e, s){ 
    ... 
} 

Answer 2

全球超過全局變量傻修復程序後，我到底到了那裏：

西，北等..只需從參數

var map 

function initMap() { 
map = new google.maps.Map(document.getElementById('map'), { 
zoom: 1, 
center: {lat: 60.18, lng: 24.93}, 
mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
} 

function drawRec(w, n, e, s){ 




var rectangle = new google.maps.Rectangle({ 
    strokeColor: ' #ff00ff', 
    strokeOpacity: 0.8, 
    strokeWeight: 1, 
    fillColor: ' #ff00ff', 
    fillOpacity: 0.35, 

    bounds: { 

    west: w, north:n, east: e, south:s 
    }, 

    map: map 

    }); 

} 


initMap(); 
drawRec(180, 10, 160, 30);