1
私は次のようにhtml/jsのコードがうまくいきました。あなたは私が私のために、任意のAPIキー<script src = "https://maps.googleapis.com/maps/api/js">を使用していない見ることができるように名前 'google'が見つかりません - Ionic2のgoogleマップを使用しています
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var lat = 1;
var lng = 0;
var pos = "x";
var mapOptions = {
center:new google.maps.LatLng(45.10,20.10),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 5,
strokeWeight:2,
strokeColor:"#B40404"
},
draggable:true,
map: map,
});
google.maps.event.addListener(marker, 'dragend', function() {
lat = marker.getPosition().lat();
lng = marker.getPosition().lng();
pos = " - " + lat + " - " + lng + " - ";
infowindow = new google.maps.InfoWindow({
content: pos
});
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
それは、使用のこの種十分です。
私の開発の第2ステップは、このコードを自分のIonic2アプリケーションで使用することです。だから、私はアプリで単純なマップをロードしようとし始めますが、私はいくつかの問題に直面しています。
マイionic2プロジェクトは、タブのテンプレートである、と私は私のsrc/index.html
<head>
...
<script src="https://maps.googleapis.com/maps/api/js"></script>
...
</head>
に次の行を設定する最初のステップは、その後、私の関連ページ（SearchPage）で、私はちょうどhtmlに以下の内容を挿入してファイル：
<ion-content>
<div #map id="map"></div>
</ion-content>
とtsファイルには、次のようになります。
export class SearchPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
...
text: any;
lat : any;
lon : any;
constructor(public navCtrl: NavController, public recoshService: Recosh, public alertCtrl: AlertController) {
Geolocation.getCurrentPosition().then(
pos => {
this.lat = pos.coords.latitude;
this.lon = pos.coords.longitude;
this.loadMap();
this.loadGuides();
},
err => {
.....
loadMap(){
let latLng = new google.maps.LatLng(this.lat, this.lon);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
Ionic2がビルド中にエラーが表示され、トランスパイールが失敗します。それらのすべてが次のエラーに関連しています：
Cannot find name 'google'
私は間違った方法でjsライブラリを使用しているようです。どうすれば修正できますか？
をエラー自体はまだそこにはありませんが、マップは、それがページに表示されていません。提案はありますか？ – pittuzzo
@Sebaferraras私が言ったように答えが分からないので、答えは部分的に答えていると思うが、私のHTMLページごとにGoogle apiのキーはどうしたらいいの？ – pittuzzo
@pittuzzo私はapiキーを設定せずに使うことができると思います。（申し込みと作成をお勧めしますが、結局は無料です...）。それ以外の場合は、コンソールに、使用するためにキーを含める必要があることを明示的に示すエラーが表示されます。 – sebaferreras