auto center map with multiple markers in google maps 1

auto center map with multiple markers in google maps

ByAnurag batra 
//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();    

for (i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  //extend the bounds to include each marker's position
  bounds.extend(marker.position);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
    map.setZoom(3);
    google.maps.event.removeListener(listener);
});

Here is what the above code is Doing:
1. Create an empty LatLngBounds object
2. Loop through your markers array
3. Extend the bounds to include each marker's position
4. Adjust the map bounds to new bounding box
5. (optional) restore the zoom level after the map is done scaling

Similar Posts

dropzone add download button

dropzone add download button

ByAnurag batra

myDropzone.on(“success”, function(file) { var a = document.createElement(‘a’); a.setAttribute(‘href’,”/uploads/” + file.fullname); a.innerHTML = “download”; file.previewTemplate.appendChild(a); }); Here is what the above code is Doing: 1. When the user drags a file into the dropzone, the file is uploaded to the server. 2. When the file is uploaded, the server returns the file’s fullname. 3. The fullname…

node js express session expiration

node js express session expiration

ByAnurag batra

app.use(express.session( { secret: “secret”, store: new MemoryStore(), expires: new Date(Date.now() + (30 * 86400 * 1000)) })); Here is what the above code is Doing: 1. We’re requiring the express module and assigning it to the variable express. 2. We’re creating an Express application and assigning it to the variable app. 3. We’re setting the…

javascript array filter duplicates in react

javascript array filter duplicates in react

ByAnurag batra

const uniqueNames = names.filter((val,id,array) => array.indexOf(val) == id); Here is what the above code is Doing: 1. We’re using the filter() method to filter out the duplicate elements in the array. 2. The callback function for the filter method should return true if the current element is not equal to the next element. 3. The…

angular rebuild

angular rebuild

ByAnurag batra

ng build –delete-output-path Here is what the above code is Doing: 1. We’re using the “run” command to run a command in the terminal. 2. We’re using the “–” to tell the “run” command that we’re passing in a command. 3. We’re using the “–delete-output-path” flag to tell the “ng build” command to delete the…

add

add

ByAnurag batra

var element = {}, cart = []; element.id = id; element.quantity = quantity; cart.push(element); Here is what the above code is Doing: 1. We create an empty object called element. 2. We add two properties to the element object: id and quantity. 3. We create an empty array called cart. 4. We add the element…

class MyComponent extends React.Component { } … what is the ES5 equivalent of this *

class MyComponent extends React.Component { } … what is the ES5 equivalent of this *

ByAnurag batra

const createReactClass = require(‘create-react-class’); const MyComponent = createReactClass({}) Here is what the above code is Doing: 1. We’re importing the create-react-class module from the react-codemod package. 2. We’re using the create-react-class module to create a new component class, MyComponent. 3. We’re exporting MyComponent, so other files can use it. Now, let’s say that we want…