Versuchen, mehrere Google Map-Markierungen in dynamischen Karte zu erstellen

Question

Ich habe eine Karte mit einigen Links erstellt, die (wenn geklickt) den Standort der Karten mit jquery ändern.

Ich habe versucht, eine Markierung für jeden Ort zu implementieren, aber zu stuggeln, um die Markierungen an anderen Kartenpositionen als der als Standard festgelegten zu zeigen.

Ich versuche, einen Marker für jeden Lat und Long-Wert einzurichten. Ich habe versucht, den folgenden Code zu verwenden, aber ich bekomme den Fehler: TypeError: map.setPosition ist keine Funktion in Firebug-Konsole.

Mein Code ist wie folgt:

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); 
}); 

}); 

Ich habe auch eine Geige-I-Tests gewesen sein weiter, siehe https://jsfiddle.net/xxfairydragonxx/7j31df1v/

Kann mir jemand dabei helfen?

Answer 1

Ich weiß nicht, warum ich das nicht in Fiddle arbeiten machen könnte ...
Aber es funktioniert in CodePen.

Ich reparierte viele kleine Dinge.

1. Verwenden initialize statt initMap in der Google-API-Rückruf-Skriptaufruf ...
   Da das ist, wie Sie Ihre Funktion mit dem Namen.
2. Deklariere map als global (außerhalb einer bestimmten Funktion).
3. Alles, was die Karte betrifft, sollte innerhalb der initialize function sein.
4. Und vergessen Sie nicht, jQuery zu laden, wenn Sie es für etwas wie Ihre 3 Links verwenden !!!

Der Code:

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); 
    }); 

} 

Der API-Aufruf:

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

Answer 2

Sie müssen die setCenter-Methode in Ihrer Karteninstanz auf Knopfdruck sowie auf der Marker-Instanz aufrufen. Ihr Beispiel funktioniert nicht aufgrund des Funktionsumfangs. Ihr ist auf die initialize-Funktion beschränkt. Sie müssen entweder die var vor entfernen, um auf das Objekt global/window zu hissen oder eine Variablendeklaration außerhalb Ihrer initialize-Funktion erstellen.

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 
}); 
});