角Googleマップ統合

Question

私はGoogleアドレスコンポーネントを作成しました。ここでは、ファイルは以下のとおりです。

import {Component, OnInit} from '@angular/core'; 
import {GAdressService} from './gAddress.service'; 
import {Settings} from './../settings/settings'; 
import {SettingsService} from './../settings/settings.service'; 

@Component({ 
    selector: 'g-address', 
    moduleId: module.id, 
    templateUrl: './gAddress.component.html', 
    providers: [Settings,SettingsService], 
    styleUrls: ['./gAddress.style.css'], 
}) 
export class GAddressComponent implements OnInit{ 
    private lat: number= -33.8688; 
    private lng: number= 151.2195; 

    constructor(private settings: Settings,private settingsService: SettingsService) 
    { 

    } 

    ngOnInit() 
    { 
     this.load_settings(); 
     this.initMap(); 
    } 


    private load_settings() 
    { 
     this.settingsService.load().subscribe(
      (settings: Settings)=> this.settings= settings 
     ); 
    } 

    private initMap() 
    { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: this.lat, lng: this.lng}, 
      zoom: 13 
     }); 
     var card = document.getElementById('pac-card'); 
     var input = document.getElementById('pac-input'); 
     var types = document.getElementById('type-selector'); 
     var strictBounds = document.getElementById('strict-bounds-selector'); 

     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card); 

     var autocomplete = new google.maps.places.Autocomplete(input); 

     // Bind the map's bounds (viewport) property to the autocomplete object, 
     // so that the autocomplete requests use the current map bounds for the 
     // bounds option in the request. 
     autocomplete.bindTo('bounds', map); 

     var infowindow = new google.maps.InfoWindow(); 
     var infowindowContent = document.getElementById('infowindow-content'); 
     infowindow.setContent(infowindowContent); 
     var marker = new google.maps.Marker({ 
      map: map, 
      anchorPoint: new google.maps.Point(0, -29) 
     }); 

     autocomplete.addListener('place_changed', function() { 
      infowindow.close(); 
      marker.setVisible(false); 
      var place = autocomplete.getPlace(); 
      if (!place.geometry) { 
      // User entered the name of a Place that was not suggested and 
      // pressed the Enter key, or the Place Details request failed. 
      window.alert("No details available for input: '" + place.name + "'"); 
      return; 
      } 

      // If the place has a geometry, then present it on a map. 
      if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
      } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); // Why 17? Because it looks good. 
      } 
      marker.setPosition(place.geometry.location); 
      marker.setVisible(true); 

      var address = ''; 
      if (place.address_components) { 
      address = [ 
       (place.address_components[0] && place.address_components[0].short_name || ''), 
       (place.address_components[1] && place.address_components[1].short_name || ''), 
       (place.address_components[2] && place.address_components[2].short_name || '') 
      ].join(' '); 
      } 

      infowindowContent.children['place-icon'].src = place.icon; 
      infowindowContent.children['place-name'].textContent = place.name; 
      infowindowContent.children['place-address'].textContent = address; 
      infowindow.open(map, marker); 
     }); 

     // Sets a listener on a radio button to change the filter type on Places 
     // Autocomplete. 
     function setupClickListener(id, types) { 
      var radioButton = document.getElementById(id); 
      radioButton.addEventListener('click', function() { 
      autocomplete.setTypes(types); 
      }); 
     } 

     setupClickListener('changetype-all', []); 
     setupClickListener('changetype-address', ['address']); 
     setupClickListener('changetype-establishment', ['establishment']); 
     setupClickListener('changetype-geocode', ['geocode']); 

     document.getElementById('use-strict-bounds') 
      .addEventListener('click', function() { 
       console.log('Checkbox clicked! New state=' + this.checked); 
       autocomplete.setOptions({strictBounds: this.checked}); 
      }); 
    } 
} 

マイコンポーネントHTMLファイルには、次のとおりです。コードの上

<div style="display: block; width: 500px; height: 500px;"> 
    <div class="pac-card" id="pac-card"> 
    <div> 
    <div id="title"> 
     Autocomplete search 
    </div> 
    <div id="type-selector" class="pac-controls"> 
     <input type="radio" name="type" id="changetype-all" checked="checked"> 
     <label for="changetype-all">All</label> 

     <input type="radio" name="type" id="changetype-establishment"> 
     <label for="changetype-establishment">Establishments</label> 

     <input type="radio" name="type" id="changetype-address"> 
     <label for="changetype-address">Addresses</label> 

     <input type="radio" name="type" id="changetype-geocode"> 
     <label for="changetype-geocode">Geocodes</label> 
    </div> 
    <div id="strict-bounds-selector" class="pac-controls"> 
     <input type="checkbox" id="use-strict-bounds" value=""> 
     <label for="use-strict-bounds">Strict Bounds</label> 
    </div> 
    </div> 
    <div id="pac-container"> 
    <input id="pac-input" type="text" 
     placeholder="Enter a location"> 
    </div> 
</div> 
<div id="map"></div> 
<div id="infowindow-content"> 
    <img src="" width="16" height="16" id="place-icon"> 
    <span id="place-name" class="title"></span><br> 
    <span id="place-address"></span> 
</div> 
</div>  

が正常に動作します。しかし、コンポーネントのinitMap関数は "document.getElementById"関数を使っていくつかのmap要素にアクセスします。このため、マップコンポーネントを1ページで2回使用することはできません。アドバイス。

Answer 1

あなたがアクセスする必要のある各要素への参照を作成することができ、例えば、id="map"の場合には、次の操作を実行できます。

テンプレート：

... 

<div #map></div> 

... 

はコンポーネント：

... 

@ViewChild('map') private mapElem: ElementRef; 

... 
... 
... 

private initMap() { 
    var map = new google.maps.Map(this.mapElem.nativeElement, { 
     center: {lat: this.lat, lng: this.lng}, 
     zoom: 13 
    }); 
} 

...