Längen- und Breitengrad ändern google maps api

Question

Ich möchte den Breiten- und Längengrad der Karte ändern, wenn der Benutzer auf einen Link klickt. Ich habe erforderlich maps.js versucht, wenn der Benutzer auf den Link klickt, aber es nicht

maps.js

function maps(){ 
    lats = 53.430967; 
    longs = -2.960835; 
    var mapProp = { 
    center:new google.maps.LatLng(lats, longs), 
    zoom: 17, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
} 


module.exports = maps; 

stadium.js

function stadium(){ 
    $("a:contains('Stadium of Light')").on("click", function(){ 
    lats = 54.914740; 
    longs = -1.388371; 
    google.maps.event.addDomListener(window, 'load', maps); 
    window.location.href='maps.html'; 
    }); 

Answer 1

Sie die festlegen müssen funktionierten center Eigenschaft des Objekts google.maps.Map.

function stadium() { 
    $("a:contains('Stadium of Light')").on("click", function() { 
    lats = 54.914740; 
    longs = -1.388371; 
    map.setCenter(new google.maps.LatLng(lats,longs)); 
    }); 
} 

proof of concept fiddle

Code-Schnipsel:

var map; 
 

 
function maps() { 
 
    lats = 53.430967; 
 
    longs = -2.960835; 
 
    var mapProp = { 
 
    center: new google.maps.LatLng(lats, longs), 
 
    zoom: 17, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    stadium(); 
 
} 
 

 
function stadium() { 
 
    $("a:contains('Stadium of Light')").on("click", function() { 
 
    lats = 54.914740; 
 
    longs = -1.388371; 
 
    map.setCenter(new google.maps.LatLng(lats, longs)); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", maps);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#">Stadium of Light</a> 
 
<div id="googleMap"></div>