3
\$\begingroup\$

I have several Google Maps on one page and each has its own set of Lat/Lng co-ordinates. As a result I have added in the JavaScript options for each one individually as follows:

function initialize() {
   var myLatlng1 = new google.maps.LatLng(49.18589, -2.19917);
   var myLatlng2 = new google.maps.LatLng(101.1986, -50.2445);
   var myLatlng3 = new google.maps.LatLng(29.125285,-82.048823);

  var mapOptions1 = {
     zoom: 17,
     center: myLatlng1
  };
  var mapOptions2 = {
     zoom: 17,
     center: myLatlng2
  };
  var mapOptions3 = {
     zoom: 17,
     center: myLatlng3
  };

  location_1 = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions1);
  location_2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
  location_3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);

  marker1 = new google.maps.Marker({
     position: myLatlng1,
     map: location_1
  });

  marker2 = new google.maps.Marker({
     position: myLatlng2,
     map: location_2
  });

  marker3 = new google.maps.Marker({
     position: myLatlng3,
     map: location_3 
  }); 
}

The HTML is:

<div id="location_1>
  <div id="map-canvas1></div>
</div>
<div id="location_2>
  <div id="map-canvas2></div>
</div>
<div id="location_3>
  <div id="map-canvas3></div>
</div>

This just feels like a really long-winded way of doing things seeing as everything has a similar identifier - is there a better way of doing this?

\$\endgroup\$
4
\$\begingroup\$

Have you considered an array?

You can then create multiple objects, having each object the values per point.

Like this:

var coords = [
    {lat: 49.18589, lng: -2.19917, zoom: 17},
    {lat: 101.1986, lng: -50.2445, zoom: 17},
    {lat: 29.125285, lng: -82.048823, zoom: 17}
];
var markers = [];
var maps = [];

function initialize() {
    for(var i = 0, length = coords.length; i < length; i++)
    {
        var point = coords[i];
        var latlng = new google.maps.LatLng(point.lat, point.lng);

        maps[i] = new google.maps.Map(document.getElementById('map-canvas' + (i + 1)), {
            zoom: point.zoom,
            center: latlng
        });

        markers[i] = new google.maps.Marker({
            position: latlng,
            map: maps[i]
        });
    }
}

Here's what I did:

  1. Created a few variables at the top, with needed information.
  2. Created a loop to go through all the elements
  3. Reduced the number of local variable to the bare minimum
  4. Removed global variables being declared inside the function

Notice that I have this for loop:

for(var i = 0, length = coords.length; i < length; i++)

I'm not accessing the length property directly because it may decrease performance. Accessing a local variable is always faster than a property in an array/object.

Also, since i starts in 0 and your elements' id starts in 1, I had to add 1 to i, to match the right element.

Using an array, you also don't need to re-re-re-repeat everytime you need to add a point: just add a new element inside the array coords.


I hope you can understand everything and hope it is clear enough for you. And hope it really helps you.

\$\endgroup\$
  • \$\begingroup\$ @Lighty_46 You're welcome. I'm glad you like my solution. I trully hope it helps a lot in the future \$\endgroup\$ – Ismael Miguel Jul 29 '15 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.