I would like to change the latitude and longitude of the map when the user click in a link. I have tried to required maps.js when the user clicks on the link but it did not work

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

I would like to change the latitude and longitude of the map when the user click in a link. I have tried to required maps.js when the user clicks on the link but it did not work

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

• javascript
• google-maps

Share Improve this question Follow asked Mar 19, 2016 at 22:07 SquexisSquexis 9711 gold badge44 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to set the center property of the google.maps.Map object.

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 snippet:

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