google maps api moving location on button click

Question

One thing I need to do is have two buttons, outside of the map. That toggle between America and Europe.

Is there some method that I missed?

code:

var map;


var infoWindow = new google.maps.InfoWindow({
    disableAutoPan : false ,
    maxWidth : 450 ,
    zIndex : 1 
});

function loadMap(obj_feed){
    var mapOptions = {
        center : new google.maps.LatLng(50.4108, 4.4446) ,
        styles : mapStyle ,
        zoom : 5 ,
        mapTypeControl: false,
        streetViewControl: false,
        zoomControl: false      
    }
    var mapId     = document.getElementById('map');
        map       = new google.maps.Map(mapId, mapOptions);

    for (var i = 0; i < obj_feed.length; i++) {
        // console.log(obj_feed[i])
        var data       = obj_feed[i] ;
        var newMarker  = this.addMarker(data);
        newMarker.data = data ;
        addinfoWindow(newMarker, data);
    };
}
//add marker.
function addMarker(data) {
    //create marker.
    var marker = new google.maps.Marker({
        position : new google.maps.LatLng(data.lat, data.lng) ,
        icon : {
            url : 'pin.png',
            size : new google.maps.Size(37,55),
            origin :  new google.maps.Point(0,0),
            scaleSize : new google.maps.Size(37,55)
        },
        title : data.date + ' ' + data.event ,
        animation : google.maps.Animation.DROP
    });
    marker.setMap(map);
    return marker ;
}
//info Window .
function addinfoWindow(marker, data) {
    //content string.
    var ctString = '';
    ctString += '<div class=\"gWrap\">';
    ctString += '<div class=\"gHeader\"><h3>';
    ctString +=  data.event ;
    ctString += '</h3></div>';
    ctString += '<div class=\"gbody row\">';
    ctString += '<div class=\"col-md-6\">';
    ctString += '<img class=\"img-rounded\" src="' + data.attachment + '" />';
    ctString += '</div>'
    ctString += '<div class=\"col-md-6\">';
    ctString += '<strong class=\"gDate\">' + data.date + '</strong>';
    ctString +=  data.content ;
    ctString += '</div>'    
    ctString += '</div>';
    ctString += '<div class=\"gTrigger row\"><div class=\"col-xs-12\">';
    ctString += '<a href=\"#\"';
    ctString += 'data-page-id="' + data.pageId + '"' ;
    ctString += '>More Details <i class=\"glyphicon glyphicon-forward\"></i></a>';
    ctString += '</div></div>';
    ctString += '</div>';   

    //add listener.
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.close();
        infoWindow.setContent(ctString);
        infoWindow.open(map, marker);
    })
}

I'm calling the google maps load event on a different page, to pass an object into it.

Answer 1

The simplest, most flexible way would be to create a function in the global scope that centers and zooms the map to fit a bounds, then provide that with the appropriate bounds (can be retrieved from the geocoder). You can then adjust the bounds to suite your needs.

<input type="button" value="America" onclick="centerMap(USbounds);" />
<input type="button" value="Europe" onclick="centerMap(EuropeBounds);" />

var USbounds = {
      "south": 18.910677,
      "west": 172.4458955,
      "north": 71.3867745,
      "east": -66.95028609999997
    };
var EuropeBounds = {
      "south": 34.5428,
      "west": -31.464799900000003,
      "north": 82.1673907,
      "east": 74.35550009999997
    };
function centerMap(bounds) {
  map.fitBounds(bounds);
}

proof of concept fiddle

code snippet:

var USbounds = {
  "south": 18.910677,
  "west": 172.4458955,
  "north": 71.3867745,
  "east": -66.95028609999997
};
var EuropeBounds = {
  "south": 34.5428,
  "west": -31.464799900000003,
  "north": 82.1673907,
  "east": 74.35550009999997
};

function centerMap(bounds) {
  map.fitBounds(bounds);
}
var map;

var infoWindow = new google.maps.InfoWindow({
  disableAutoPan: false,
  maxWidth: 450,
  zIndex: 1
});

function loadMap(obj_feed) {
    var mapOptions = {
      center: new google.maps.LatLng(50.4108, 4.4446),
      zoom: 5,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControl: false
    }
    var mapId = document.getElementById('map');
    map = new google.maps.Map(mapId, mapOptions);

    for (var i = 0; i < obj_feed.length; i++) {
      var data = obj_feed[i];
      var newMarker = this.addMarker(data);
      newMarker.data = data;
      addinfoWindow(newMarker, data);
    };
  }
  //add marker.

function addMarker(data) {
    //create marker.
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.lat, data.lng),
      icon: {
        url: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
      },
      title: data.date + ' ' + data.event,
      animation: google.maps.Animation.DROP
    });
    marker.setMap(map);
    return marker;
  }
  //info Window .

function addinfoWindow(marker, data) {
  //content string.
  var ctString = '';
  ctString += '<div class=\"gWrap\">';
  ctString += '<div class=\"gHeader\"><h3>';
  ctString += data.event;
  ctString += '</h3></div>';
  ctString += '<div class=\"gbody row\">';
  ctString += '<div class=\"col-md-6\">';
  ctString += '<img class=\"img-rounded\" src="' + data.attachment + '" />';
  ctString += '</div>'
  ctString += '<div class=\"col-md-6\">';
  ctString += '<strong class=\"gDate\">' + data.date + '</strong>';
  ctString += data.content;
  ctString += '</div>'
  ctString += '</div>';
  ctString += '<div class=\"gTrigger row\"><div class=\"col-xs-12\">';
  ctString += '<a href=\"#\"';
  ctString += 'data-page-id="' + data.pageId + '"';
  ctString += '>More Details <i class=\"glyphicon glyphicon-forward\"></i></a>';
  ctString += '</div></div>';
  ctString += '</div>';

  //add listener.
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.close();
    infoWindow.setContent(ctString);
    infoWindow.open(map, marker);
  })
}
google.maps.event.addDomListener(window, "load", function() {
  loadMap([{
    lat: 48.856614,
    lng: 2.3522219,
    date: "12/25/2015",
    attachment: "",
    pageId: "12",
    content: "content",
    event: "event"
  }]);
});

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="America" onclick="centerMap(USbounds);" />
<input type="button" value="Europe" onclick="centerMap(EuropeBounds);" />
<div id="map"></div>