WebixポップアップのGoogleマップ

Question

私はWebixのポップアップウィンドウにマーカー付きのGoogle Mapsインスタンスを取得しようとしていますが、私はinitMap is not a functionエラーが発生しています。 WebixでGoogle Mapsを直接初期化する方法がありますが、この時間マーカーオブジェクトは認識されません。ここに私のコードです：

$$("showMapButton").attachEvent("onItemClick", function (id, e) { 
     if (!$$("mapwin")) 
     webix.ui({ 
      view: "window", 
      adjust: true, 
      id: "mapwin", 
      position: "center", 
      move: true, 
      width: 600, 
      height: 600, 
      //top: 100, left: 50, 
      position: "center", 
      head: { 
       view: "toolbar", 

       elements: [ 
         { view: "label", label: "OpenStreet Map", align: 'left' }, 
        { 
         view: 'button', label: 'Close', width: 70, click: function() { 
          $$("mapwin").hide(); 
         } 
        } 
       ] 
      }, 
      body: { 
       width: 300, 
       height: 300, 
       template: "<div id='mapBody'> </div>" 
       }, 

     }); 


     // google.maps.event.addDomListener(window, "load", initMap); 



     function initMap() { 
      var uluru = { lat: 32, lng: 32 }; 
      var map = new google.maps.Map(document.getElementById('mapBody'), { 
       zoom: 4, 
       center: uluru 
      }); 
      var marker = new google.maps.Marker({ 
       position: uluru, 
       map: map 
      }); 
     } 


     $$("mapwin").show(); 
    }); 

私は確かにいくつかのヘルプを使用することができます...事前に感謝！

Answer 1

$$（ "showMapButton"）。attachEvent（ "onItemClick"、機能（ID、E）{

 //create a window if it is does not exist 
     if (!$$("mapwin")) 
      webix.ui({ 
       view: "window", 
       id: "mapwin", 
       position: "center", 
       move: true, 
       width: 600, 
       height: 600, 
       head: { 
        view: "toolbar", 
        elements: [ 
        { 
         id:"mapClose", view: 'button', label: 'Close', width: 120, click: function() { 
          //hide windows (.close() will destroy) 

          $$("map").getMap(true).then(function (map) { 
           marker.setMap(null); 
           map.setOptions({ styles: [] }); 
          }); 

          $$("mapwin").hide(); 

         } 
        }, 

         { 
          align:"right", id:"setStyleButton", view: 'button', label: 'Koyu Tema', width: 120, click: function() { 
           $$("map").getMap(true).then(function (map) { 



           }); 
          } 
         } 

        ] 
       }, 
       body: { 
        view: "google-map", 
        id: "map", 
        key: "AIzaSyBzviXHLV5cRdCOatv5oBatf5EGJ019npQ", 
        zoom: 9 

       }, 

      }); 

     $$("map").getMap(true).then(function (map) { 
      var myLatlng = new google.maps.LatLng(latitude, longtitude); 
      map.setCenter(myLatlng); 



      marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: 'Hello World!', 
       //icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png' 
      }); 
      var infowindow = new google.maps.InfoWindow({ 
       content: 'Latitude: ' + myLatlng.lat() + 
       '<br>Longitude: ' + myLatlng.lng() 
      }); 

      var str = 'Araç: ' + myLatlng.lat() + '<br>Enlem: ' + myLatlng.lat() + '<br>Boylam: ' + myLatlng.lng() + '<br>Konum: ' + location; 


      infowindow.setContent(str); 
      marker.addListener('click', function() { 
      infowindow.open(map, marker); 
      }); 

      // infowindow.open(map, marker); 
     }); 
     $$("mapwin").show(); 


    }); 

すべての権利、それは約束機能だけの問題である。まず、マップをフェッチする必要がありますあなたがそれを使って遊ぶことができるなら、私はコードをここに書きます。