Übergabe von Variablen zur Kartenfunktion

Question

Ich versuche, ein paar Längen- und Breitengrad-Variablen an eine Funktion zu senden, die dann eine Google Map generiert.

Beginnend mit einer Datentabelle, die verschiedene Informationen abruft, die in einer Datenbank gespeichert werden, verwende ich Datenattribute, um die lng und Lat für jeden Datensatz zu speichern. Wenn ein Datensatz ausgewählt ist, wird ein Modal geöffnet und die Karte wird angezeigt.

Ich konnte die Karte mit den Standardwerten lng und lat anzeigen lassen. Aber jetzt muss ich jedes Mal, wenn ein Datensatz ausgewählt wird, eine neue Karte erstellen.

mit dem Onclick-Ereignisse starten, die die modalen lösen zu öffnen (so weit wie möglich verkürzt):

$('#example1').on('click', 'tr > td > a.actionMatch', function(e) 
{ 
    e.preventDefault(); 

    var actimpbill = $(this).attr('data-actimpbill'); // random record info 
    var actramplat = parseFloat($(this).attr('data-actramplat')); // first lat 
    var actramplng = parseFloat($(this).attr('data-actramplng')); // first lng 
    var actdellat = parseFloat($(this).attr('data-actdellat')); // second lat 
    var actdellng = parseFloat($(this).attr('data-actdellng')); // second lng 

    // my map was opening in a grey box. this next piece of code fixed that 
    $("#actionMatchbackModal").on("shown.bs.modal", function() { 
    google.maps.event.trigger(map, "resize"); 
    }); 

    initMap(actramplat, actramplng, actdellat, actdellng); // my attempt to call a function and the variables to it 

    $('#actionMatchbackModal').modal('show'); // show the modal 
}); 

Hier ist die Funktion, die die Karte setzt. Dies befindet sich außerhalb des ersten OnClick-Ereignisses, das das Modal öffnet (ich bin mir nicht sicher, ob das ein Problem ist). Dies ist, wo ich versuche, um die Variablen zu übergeben, die ich innerhalb des Onclick-Ereignis erstellt:

function initMap(actramplat, actramplng, actdellat, actdellng) 
{ 
    // map options 
    var options = { 
    zoom: 8, 
    center: {actramplat, actramplng} 
    } 

    // new map 
    var map = new google.maps.Map(document.getElementById('map'), options); 

    // add marker 
    var marker = new google.maps.Marker({ 
    position:{actdellat, actdellng}, 
    map: map 
    }); 
} 

ich wahrscheinlich den Funktionsaufruf am schlachten. Die Funktion enthielt einmal die Standardwerte für lat und lng, und ich konnte eine Karte richtig erstellen.

Bitte helfen Sie mir, diesen Fehler zu beheben, und danke Ihnen im Voraus.

* EDIT *

ich nur die Konsole überprüft, und ich erhalte diese Fehler:

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number 
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number 

* EDIT *

Habe ich nur noch parseFloat auf die Variablen zu Stellen Sie sicher, dass sie keine Zeichenfolgen sind, aber immer noch keinen Erfolg.

* EDIT *

Hier ist, was die Daten-Attribute wie folgt aussehen:

<a href="#" class="actionMatch" id="actionMatch" 
data-toggle="modal" data-actimpbill="xxxxxxxx" 
data-actramplat="39.11" data-actramplng="-94.63" 
data-actdellat="39.03" data-actdellng="-96.83" 
data-actreclat="39.84" data-actreclng="-96.65" 
rel="tooltip" data-placement="right" title="Action Matchback"></a> 

Sie können sehen, die actramplat, actramplng, actdellat, in der A-Tag actdellng oben.

Answer 1

Mit Blick auf ihre API, sie erwarten lat/long-Werte als Objektliteral zur Verfügung gestellt werden, die wie folgt aussieht: var myLatLng = {lat: -25.363, lng: 131.044};

So müssen Sie es so nennen:

// map options 
    var options = { 
    zoom: 8, 
    center: {lat: dellat, lng: dellng} 
    } 

    // new map 
    var map = new google.maps.Map(document.getElementById('map'), options); 

    // add marker 
    var marker = new google.maps.Marker({ 
    position:{lat: reclat, lng: reclng}, 
    map: map 
    });