Angular 2具有多個標記的Google地圖

我目前正在開發一個使用Google地圖的Angular2項目。Angular 2具有多個標記的Google地圖

我試圖在區域周圍顯示標記和多個標記。我有地圖工作，但似乎不能標記。

<div class="google-maps"></div> 



constructor(private _elementRef:ElementRef) { 
    } 
    ngAfterViewInit() { 
    let el = this._elementRef.nativeElement.querySelector('.google-maps'); 
    GoogleMapsLoader.load((google) => { 
     let myLatlng = new google.maps.LatLng(44.5403,-78.5463); 
     new google.maps.Map(el, { 
     center: new google.maps.LatLng(44.5403, -78.5463), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

     }); 
     new google.maps.Marker(el,{ 
     draggable: true, 
     animation: google.maps.Animation.DROP, 
      position: myLatlng, 
      title:"Hello World!" 
      }); 
     }); 
    }

來源

2017-03-07 sridharan

任何錯誤？ –

希望這個鏈接將幫助你http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example –

沒有錯誤日誌按摩 – sridharan

標記函數似乎不符合官方文檔here。

let map = new google.maps.Map(el, { 
     center: new google.maps.LatLng(44.5403, -78.5463), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

     }); 
let marker = new google.maps.Marker({ 
     draggable: true, 
     animation: google.maps.Animation.DROP, 
      position: myLatlng, 
      map: map,//set map created here 
      title:"Hello World!" 
      });

來源

2017-03-07 07:10:52

謝謝如何添加多個標記 – sridharan

你可以調用同一個'新的標記'與不同的'位置'和'標題'值上的相同的地圖..有一個函數，可以隨時創建標記和調用。 –

@suraj嗨，你知道如何添加infowindow標記與他們分配的內容？ [鏈接]（https://stackoverflow.com/questions/45252867/ionic-2-angular-2-adding-array-of-markers-with-infowindow-on-google-map） – aaa

試試這個代碼這項工作我的項目

谷歌官方文件here

import GoogleMapsLoader from 'google-maps'; 
import { google } from 'google-maps'; 

ngAfterViewInit() { 

let el = this._elementRef.nativeElement.querySelector('.contact-us'); 

GoogleMapsLoader.KEY = 'g4554645645645645645646'; 

GoogleMapsLoader.load((google) => { 

let myLatlng = new google.maps.LatLng(23.5454, 90.8785); 

let map = new google.maps.Map(el, { 

    center: new google.maps.LatLng(23.8787878, 90.87878), 

    zoom: 18, 

    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

let marker = new google.maps.Marker({ 
     draggable: true, 
     animation: google.maps.Animation.DROP, 
     position: myLatlng, 
     map: map, 
     title:"Hello World!" 
    }); 

});

Template.html登錄

<div class="contact-us" style="position: relative; height: 470px;"></div>

來源

2017-03-07 17:36:12

只是一個建議..避免把任何類似的公共網站的API密鑰，如SO .. –

Angular 2具有多個標記的Google地圖

回答

相關問題