CODEWITHSUNDEEP
javascriptjquerygoogle-mapscenter
Mustapha George
Mustapha George

Reputation: 2527

google map - change centers

this code will move map center to one of four locations. It works but seems slow. Is it possible to get better performance by caching 4 maps in advance or something like that? Maybe running the initialize function each time is slowing us down?

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="../jquery/jquery.js" type="text/javascript"></script>  

    <script>


$( document ).ready(function() {

    var map;
    var montreal = new google.maps.LatLng(45.504 , -73.597);
    var newCenter = montreal
    var toronto = new google.maps.LatLng(43.65304 , -79.32129);
    var calgary = new google.maps.LatLng(50.99394, -114.16992);
    var vancouver = new google.maps.LatLng(49.18984, -123.17871);

    function initialize() {
      var mapDiv = document.getElementById('map-canvas');
      var mapOptions = {
        zoom: 10,
        center: newCenter
      }
      map = new google.maps.Map(mapDiv, mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $( "#location_1" ).on( "click", function() {
      newCenter = montreal;
      initialize();
    });

    $( "#location_2" ).on( "click", function() {
        newCenter = toronto;
        initialize();
    });
    $( "#location_3" ).on( "click", function() {
        newCenter = calgary;
        initialize();
    });
    $( "#location_4" ).on( "click", function() {
        newCenter = vancouver;
        initialize();
    });

});

  </script>
  </head>
  <body>
  <button id='location_1'>Montreal</button>
  <button id='location_2'>Toronto</button>
  <button id='location_3'>Calgary</button>
  <button id='location_4'>Vancouver</button>

    <div id="map-canvas"></div>

Upvotes: 0

Views: 138

Answers (2)

Kyle Emmanuel
Kyle Emmanuel

Reputation: 2221

Use map.setCenter(). calling the initialize() function would slow down since you are creating another instance of the map object.

Reference: https://developers.google.com/maps/documentation/javascript/reference

Upvotes: 0

Kyojimaru
Kyojimaru

Reputation: 2724

you can try using setCenter() to change the center of the map without the need to call the initialize function again, here's how

$( "#location_1" ).on( "click", function() {
  map.setCenter(montreal);
});

$( "#location_2" ).on( "click", function() {
    map.setCenter(toronto);
});
$( "#location_3" ).on( "click", function() {
    map.setCenter(calgary);
});
$( "#location_4" ).on( "click", function() {
    map.setCenter(vancouver);
});

Upvotes: 1

Related Questions