agon024 agon024 - 1 month ago 5
Javascript Question

Google Maps - Zoom out when info window is closed or other radio button filter is "ticked"

I need this map to zoom out to "2" when 2 things happen:


  1. When you close the info window

  2. When you click another radio button



I have tried a few things but nothing seems to work.

Here is my code:

var map;

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(58, 16),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

var seg = {
1:'invesCastProd',
2:'forged',
3: 'airframe',
5: 'corp',
6: 'structurals'

}

var comp = {
1:'structurals',
2:'airfoils',
3: 'airfoils',
4: 'wyman',
5: 'energy',
6: 'strucComp',
7: 'mechHard',
8: 'engineProd',
9: 'corp',
10: 'aero',
12: 'timet',
13: 'specMetals'

}

var myJSON = {};
var myMarkers=[];

$.getJSON("locations.json", function(json1) {
myJSON=json1;
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.latitude, data.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng
});
myMarkers[key]=marker;
marker.setMap(map);

var infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(marker, 'click', function() {

if (infoWindow) {infoWindow.close();}
infoWindow = new google.maps.InfoWindow({
content: "<h5>" + data.display_name + "</h5>" +
"<div>" + data.street+ "</div>" +
"<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" +
"<div class='mapPhoneNum'>" + data.telephone + "</div>" +
"<div><strong>" + seg[data.segment_id] + "</strong></div>" +
"<div><strong>" + comp[data.component_id] + "</strong></div>" +
"<a href=" + data.web_url + ">Website</a>"
});
infoWindow.open(map, marker);
map.setZoom(15);
map.panTo(this.getPosition());

});

filterMarkers = function(category){
//console.log(category);

console.log(category.data());
var component = category.data("component_id");
var segment = category.data("segment_id")

// Clear markers
setMapOnAll(null);
//marker = [];
var filteredMarkers=[];

$.each(myJSON, function(key, data) {
//console.log(key);

if( (myJSON[key].component_id == component) && (myJSON[key].segment_id == segment) ){
console.log("FOUND");

filteredMarkers.push(key);
}
});

for(i=0;i<filteredMarkers.length;i++){
myMarkers[filteredMarkers[i]].setMap(map);
}
}

function setMapOnAll(map) {
for (var i = 0; i < myMarkers.length; i++) {
myMarkers[i].setMap(map);
}
}
});


});

what is the best way to accomplish this?

Answer

On close of an InfoWindow is the question.

You need an event listener for that.

Just add this in your "marker click" listener:
   (google.maps.event.addListener(marker, 'click', function() {) - Line #55 of script.js.

google.maps.event.addListener(infoWindow,'closeclick',function(){
    console.log("CLOSE");
    map.setZoom(2);
    map.setCenter({lat:58,lng:16});
});

It sounds weird to add a listener into a listener, I know.
But that's where you define your infoWindow...
;)
It works!



EDIT
(I didn't took care of the second request in the above...)

So, have to move the above into a function:

function resetMapOrigin(){
    console.log("Reseting Map.");
    map.setZoom(2);
    map.setCenter({lat:58,lng:16});
}

Then call this "reset" function when you want.
;)

in google.maps.event.addListener(marker, 'click', function() {:

google.maps.event.addListener(infoWindow,'closeclick',function(){
    resetMapOrigin();    // See Plunker line #72
});

and in filterMarkers = function(category){, right after setMapOnAll(null);:

resetMapOrigin();    // See Plunker line #90

Updated Plunker