Googleマップのマーカー位置を更新する

Question

私は、HTMLのgeolocation .watcPositionによって生成されたマーカーを持つGoogleマップを持っています。私は、ボタンをクリックするとマーカーの位置をどこか別の場所に更新したい。私はdivに印刷されるボタンのために保存された座標を得ることができます。つまり、関数が機能していることを意味しますが、マーカーをターゲットにすると何も起こりません。 JSは：

//Function to fetch coordinates 
      window.onload(findLocation()); 
      var x = document.getElementById("where"); 

      function findLocation() 
      { 
       if (navigator.geolocation) 
       { 
        navigator.geolocation.watchPosition(locatorMap); 
       } 
       else 
       { 
        x.innerHTML = "Please allow access to location."; 
       } 
      } 

      //Setting up map 
      function locatorMap(position) 
      { 
       //Location description array 
       var buttons = ["DIT Aungier Street:", "DIT Kevin Street:", "DIT Bolton Street:", "DIT GrangeGorman"]; 

       //Coordinates Array 
       var coordinates = []; 
        coordinates[0]= {lat: 53.3385, lng: -6.2666}; 
        coordinates[1]= {lat: 53.3375, lng: -6.2677}; 
        coordinates[2]= {lat: 53.3515, lng: -6.2694}; 
        coordinates[3]= {lat: 53.3548, lng: -6.2794}; 

       myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
       var a0 = document.getElementById("aungier"), a1 = document.getElementById("kevin"), a2 = document.getElementById("bolton"), a3 = document.getElementById("grange"); 
       a0.onclick = function() 
       { 
        myLocation = coordinates[0], 
        where.innerHTML = buttons[0]; 
       }; 

       a1.onclick = function() 
       { 
        myLocation = coordinates[1], 
        where.innerHTML = buttons[1]; 
       }; 

       a2.onclick = function() 
       { 
        myLocation = coordinates[2], 
        where.innerHTML = buttons[2]; 
       }; 

       a3.onclick = function() 
       { 
        myLocation = coordinates[3], 
        where.innerHTML = buttons[3]; 
       }; 

       //Map specs 
       var map = new google.maps.Map(document.getElementById("mapOne"), 
       { 
        zoom: 16, 
        disableDefaultUI: true, 
        mapTypeId: google.maps.MapTypeId.TERRAIN 
       }); 

       var marker = new google.maps.Marker 
       ({ 
        map: map, 
        position: myLocation, 
        animation: google.maps.Animation.DROP, 
        title: "You are here" 
       }); 

       map.setCenter(myLocation); 
      } 

Answer 1

1. はグローバルスコープ
2. 変更ボタンをクリックすると、マーカーとマップ中央にマップとマーカーの変数を置く

すなわち

a0.onclick = function() { 
    myLocation = coordinates[0], 
    where.innerHTML = buttons[0]; 
    setMap(myLocation); 
}; 

function setMap(position) { 
    if (marker.setPosition) marker.setPosition(myLocation); 
    if (map.setCenter) map.setCenter(myLocation); 
} 

proof of concept fiddle

コードスニペット：

//Function to fetch coordinates 
 
// window.onload(findLocation()); 
 
google.maps.event.addDomListener(window,'load',function() {findLocation();}); 
 
var x = document.getElementById("where"); 
 
var marker; 
 
var map; 
 

 
function findLocation() { 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.watchPosition(locatorMap); 
 
    } else { 
 
    x.innerHTML = "Please allow access to location."; 
 
    } 
 
} 
 

 
//Setting up map 
 
function locatorMap(position) { 
 
    //Location description array 
 
    var buttons = ["DIT Aungier Street:", "DIT Kevin Street:", "DIT Bolton Street:", "DIT GrangeGorman"]; 
 

 
    //Coordinates Array 
 
    var coordinates = []; 
 
    coordinates[0] = { 
 
    lat: 53.3385, 
 
    lng: -6.2666 
 
    }; 
 
    coordinates[1] = { 
 
    lat: 53.3375, 
 
    lng: -6.2677 
 
    }; 
 
    coordinates[2] = { 
 
    lat: 53.3515, 
 
    lng: -6.2694 
 
    }; 
 
    coordinates[3] = { 
 
    lat: 53.3548, 
 
    lng: -6.2794 
 
    }; 
 

 
    myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
 
    var a0 = document.getElementById("aungier"), 
 
    a1 = document.getElementById("kevin"), 
 
    a2 = document.getElementById("bolton"), 
 
    a3 = document.getElementById("grange"); 
 
    a0.onclick = function() { 
 
    myLocation = coordinates[0], 
 
     where.innerHTML = buttons[0]; 
 
     setMap(myLocation); 
 
    }; 
 

 
    a1.onclick = function() { 
 
    myLocation = coordinates[1], 
 
     where.innerHTML = buttons[1]; 
 
     setMap(myLocation); 
 
    }; 
 

 
    a2.onclick = function() { 
 
    myLocation = coordinates[2], 
 
     where.innerHTML = buttons[2]; 
 
     setMap(myLocation); 
 
    }; 
 

 
    a3.onclick = function() { 
 
    myLocation = coordinates[3], 
 
     where.innerHTML = buttons[3]; 
 
     setMap(myLocation); 
 
    }; 
 

 
    //Map specs 
 
    map = new google.maps.Map(document.getElementById("mapOne"), { 
 
    zoom: 16, 
 
    disableDefaultUI: true, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 

 
    marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: myLocation, 
 
    animation: google.maps.Animation.DROP, 
 
    title: "You are here" 
 
    }); 
 

 
    map.setCenter(myLocation); 
 
} 
 
function setMap(position) { 
 
    if (marker.setPosition) marker.setPosition(myLocation); 
 
    if (map.setCenter) map.setCenter(myLocation); 
 
}

html, 
 
body, 
 
#mapOne { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="aungier" value="aungier" type="button" /type="button" > 
 
<input id="kevin" value="kevin" type="button" type="button" /> 
 
<input id="bolton" value="bolton" type="button" type="button" /> 
 
<input id="grange" value="grange" type="button" /> 
 
<div id="mapOne"></div> 
 
<div id="where"></div>