Maps API Javascript 함수가 오류를 호출합니다.

addPoly 함수의 내용을 초기화 함수에 사용하고있어 완벽하게 작동합니다. 하지만 addPoly 함수를 만들고 초기화 함수에서 호출하면 작동하지 않습니다. 나는 모양을 선택하도록 사용자를 만들고 싶다. 따라서 단추의 onclick은 특정 모양 함수를 호출 할 수 있습니다.Maps API Javascript 함수가 오류를 호출합니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <style type="text/css"> 
    html,body {height:100%;} 
    #map-canvas {height:92%;width:100%;} 

    </style> 



    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript"> 

     var shape; 
     function initialize() { 
     var mapDiv = document.getElementById('map-canvas'); 
     var map = new google.maps.Map(mapDiv, { 
      center: new google.maps.LatLng(24.886436490787712, -70.2685546875), 
      zoom: 4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      zoomControl: true 
     }); 

     addPoly();   
     } 

     function addPoly(){ 
     shape = new google.maps.Polygon({ 
      strokeColor: '#ff0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#ff0000', 
      fillOpacity: 0.35 
     }); 
     shape.setMap(map); 
     google.maps.event.addListener(map, 'click', addPoint); 

     } 

     function clearAll(){  
     shape.setMap(null);  
     } 

     function addPoint(e) {  
     var vertices = shape.getPath(); 
     vertices.push(e.latLng);   
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body style="font-family: Arial; border: 0 none;"> 
    <div id="map-canvas"></div> 
    <input type="button" value="Clear" onclick="clearAll()"> 
    Selection Type:&nbsp; 
    <select id="selectType"> 
     <option type="button" value="Polygon" onclick="initialize()">Polygon</option> 
     <option type="button" value="Circle" onclick="initialize()">Circle</option> 
    </select> 
    </body> 
</html>

출처

2013-05-11 Aakash Thakkar