異なるコールバックを持つ2つのGoogleマップを追加

Question

私は自分のページに2つのGoogleマップコンテナを持っています。

first-id = "map"は通常の "表示マップ" second-id = "map2"はユーザーが入力を入力し、ユーザーが入力した場所にマップが更新される検索マップです。

これらのマップは同じapiキーを使用しますが、コールバックは異なります。

私は、重複したAPIが

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script> 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" type="text/javascript"></script> 

を呼び出しますが、コールバックが各マップの使用のために異なる？言ってコンソールに次のgetおよびエラーの両方を追加した場合現在、私はどちらかが次のように

私のコードがある他の文句を言わない仕事を仕事に乗るので、私は、仕事に両方のマップを取得して行くのですかそう

：

<div id="map"></div> 
<div id="map2"></div> 

    <script> 
    function initMap() { 
     var paarl = {lat: -33.725853, lng: 18.988628}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     scrollwheel: false, 
     center: paarl 
     }); 
     var marker = new google.maps.Marker({ 
     position: paarl, 
     map: map 
     }); 
    } 
    </script> 

    <script> 
    function initAutocomplete() { 
    var map = new google.maps.Map(document.getElementById('map2'), { 
     center: {lat: -33.8688, lng: 151.2195}, 
     zoom: 13, 
     scrollwheel: false, 
     mapTypeId: 'roadmap' 
    }); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 
    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
     var places = searchBox.getPlaces(); 

     if (places.length == 0) { 
     return; 
     } 

     // Clear out the old markers. 
     markers.forEach(function(marker) { 
     marker.setMap(null); 
     }); 
     markers = []; 

     // For each place, get the icon, name and location. 
     var bounds = new google.maps.LatLngBounds(); 
     places.forEach(function(place) { 
     if (!place.geometry) { 
      console.log("Returned place contains no geometry"); 
      return; 
     } 
     var icon = { 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(25, 25) 
     }; 

     // Create a marker for each place. 
     markers.push(new google.maps.Marker({ 
      map: map, 
      icon: icon, 
      title: place.name, 
      position: place.geometry.location 
     })); 

     if (place.geometry.viewport) { 
      // Only geocodes have viewport. 
      bounds.union(place.geometry.viewport); 
     } else { 
      bounds.extend(place.geometry.location); 
     } 
     }); 
     map.fitBounds(bounds); 
    }); 
    } 
    </script> 

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" type="text/javascript"></script> 

Answer 1

しないでくださいGoogleは、ライブラリリクエストをマップ2を使用

最も簡単な方法は、拳の内側に第2の機能を呼び出す

<script> 
     function initMap() { 
     var paarl = {lat: -33.725853, lng: 18.988628}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 15, 
      scrollwheel: false, 
      center: paarl 
     }); 
     var marker = new google.maps.Marker({ 
      position: paarl, 
      map: map 
     }); 

     initAutocomplete(); 

     } 


    </script> 

initMap

です

をロードするか、最終的に2番目のロードにonloadイベントを使用する