ダイナミックマップに複数のGoogleマップマーカーを作成しようとしています

Question

jqueryを使用して（クリックすると）地図の場所を変更するリンクがいくつか作成されています。

私は各場所のマーカーを実装しようとしましたが、デフォルトとして設定されているもの以外の他の地図の場所にマーカーを表示するように戸惑いました。

私は、緯度と経度ごとにマーカーを設定しようとしています。次のコードを使用しようとしましたが、エラーが発生します。TypeError：map.setPositionは、Firebugコンソールの関数ではありません。次のように

私のコードは次のとおりです。

HTML：

<a id="link-aberdeen" href="javascript:void(0)" class="button1">Munich</a>  
<a id="link-glasgow" href="javascript:void(0)" class="button2">Oxford</a>  
<a id="link-glasgow" href="javascript:void(0)" class="button3">Glasgow</a> 

<div id="map-canvas"></div> 

CSS：

#map-canvas { background: #eaeaea none repeat scroll 0 0; height: 300px; width: 100%; } 

JAVASCRIPT：

function initialize() { 

map = new google.maps.Map(document.getElementById('map-canvas'), { 
center: new google.maps.LatLng(48.1293954,12.556663), //Setting Initial Position 
zoom: 10 
}); 

var marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(48.1293954,12.556663), 
center: new google.maps.LatLng(48.1293954,12.556663), 
zoom: 10 
}); 

} 


function newLocation(newLat,newLng) { 
map.setCenter({ 
    lat : newLat, 
    lng : newLng 
}); 

map.setPosition({ 
    lat : newLat, 
    lng : newLng 
}); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 


$(document).ready(function() { 

$(".button1").on('click', function() { 
    newLocation(48.1293954,12.556663); 
}); 

$(".button2").on('click', function() { 
    newLocation(51.7163950,-1.2196100); 
}); 

$(".button3").on('click', function() { 
    newLocation(55.8610240,-4.2614560); 
}); 

}); 

私も、私がテストしているバイオリンを持っていますon、see https://jsfiddle.net/xxfairydragonxx/7j31df1v/

誰でも私にこれを手伝ってもらえますか？

Answer 1

...
は、しかし、それはCodePenで動作します。

多くの小さなものが修正されました。

1. 利用initializeの代わりに、GoogleのAPIスクリプトの呼び出しコールバック...
   でinitMapそれはあなたがあなたの関数を命名方法ですので。
2. mapをグローバル（特定の機能の外）として宣言します。
3. マップに関するすべてがinitialize functionの内側にある必要があります。
4. また、3つのリンクのようなものに使用する場合は、jQueryを読み込むことを忘れないでください！

コード：

var map; 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(48.1293954, 12.556663), //Setting Initial Position 
     zoom: 10 
    }); 

    var marker = new google.maps.Marker({ 
     map: map, 

     position: new google.maps.LatLng(48.1293954, 12.556663), 
     center: new google.maps.LatLng(48.1293954, 12.556663), 
     zoom: 10 
    }); 

    function newLocation(newLat, newLng) { 
     map.setCenter({ 
      lat: newLat, 
      lng: newLng 
     }); 

     new google.maps.Marker({ 
      map: map, 
      position:{ 
       lat: newLat, 
       lng: newLng 
      } 
     }); 
    } 


    $(".button1").on('click', function() { 
     newLocation(48.1293954, 12.556663); 
    }); 
    $(".button2").on('click', function() { 
     newLocation(51.7163950, -1.2196100); 
    }); 
    $(".button3").on('click', function() { 
     newLocation(55.8610240, -4.2614560); 
    }); 

} 

APIの呼び出し：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7_p0NkDTQQmn8ZVJosJJ-3Xr93x-tVVo&callback=initialize" async defer></script> 

Answer 2

マーカーインスタンスのsetCenterメソッドをボタンインスタンスでにコールする必要があります。あなたの例は、関数スコープのために動作しません。 の範囲はinitializeです。 global/windowオブジェクトにホイストするには、の前にvarを削除するか、initialize関数の外で変数宣言を作成する必要があります。私は、これはフィドルで動作するように作ることができなかった理由を知らない

var map; 
var marker; 

function initialize() { 
    map = new google.maps.Map(…); 
    marker = new google.maps.Marker(…); 
} 

$('.button').on('click', function() { 
    map.setCenter({ 
    lat: LATITUDE, 
    lng: LONGITUDE 
    }); 

marker.setPosition({ 
    lat: LATITUDE, 
    lng: LONGITUDE 
}); 
});