javascript - Google Map API v3 - show all visible markers with maximum zoom - Stack Overflow

admin管理员组

文章数量:1400128

I have a page where I can toggle on/off categories of markers. One marker (the 'property') will always be visible. I would like to zoom in as close as possible showing all visible markers.

So, if I have 3 markers close together I would like to zoom in all close as possible while still fitting the 3 markers.

var fullBounds = new google.maps.LatLngBounds();
var map;
var infowindow;
var markers = {};
var nearbyPlaces = {{#property}}{{{stringify nearbyPlaces}}}{{/property}};
var property = new google.maps.LatLng({{#property}}{{address.geo.lat}},{{address.geo.lng}}{{/property}});
var name = {{#property}}{{{stringify name}}}{{/property}}
var prop = {{#property}}{{{stringify address}}}{{/property}};


function initialize() {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: property,
        zoom: 15
    });

    var marker = new google.maps.Marker({
        map: map,
        icon: '../../../../img/map/property.png', // Set Property to a green marker
        position: property
    });

    infowindow = new google.maps.InfoWindow();

    // Set infowindow for the property
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(name + '<br/>' + prop.street + '<br/>' + prop.city + ', ' + prop.state.name);
        infowindow.open(map, this);
    });

    var l = nearbyPlaces.length;
    while (l--) {
        markers[nearbyPlaces[l].category] = [];
        createCategory(nearbyPlaces[l]);
    }

    console.log(map.getZoom());
}

function createCategory(item) {
    var l = item.places.length;
    while (l--) {
        var marker = createMarker(item.places[l]);
        markers[item.category].push(marker);
        console.log(item.category);

        switch(item.category){
            case 'Public Schools':
                marker.icon = '../../../../img/map/public_school.png';
                break;
            case 'Colleges':
                marker.icon = '../../../../img/map/college.png';
                break;
            case 'Preferred Employers':
                marker.icon = '../../../../img/map/work.png';
                break;
            default:
                marker.icon = '../../../../img/map/star.png'
        }

    }
}

function toggleCategory(name, el) {
    //map.fitBounds(fullBounds);
    var button = $(el);
    var visible = true;

    if (button.hasClass('active')) {
        visible = false;
    }

    button.toggleClass('active');


    var category = markers[name];
    for (var x = 0; x < category.length; x++){
        var lat = category[x].position.k;
        var lng = category[x].position.B;
        var point = new google.maps.LatLng(lat,lng);
        fullBounds.extend(point);
    }

    var l = category.length;
    console.log('cagegory length: ' + category.length);
    while (l--) {
        category[l].setVisible(visible);
    }

    showVisible();

}

function createMarker(place) {
//var lat = parseFloat(place.address.geo.lat);
//var lng = parseFloat(place.address.geo.lng);
//var point = new google.maps.LatLng(lat,lng);
//fullBounds.extend(point);
//console.log(place);

    var marker = new google.maps.Marker({
        map: map,
        title: place.title,
        icon: '.png',  // Set all other markers to red...
        position: new google.maps.LatLng(place.address.geo.lat, place.address.geo.lng)
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(place.title + '<br/>' + place.address.street + '<br/>' + place.address.city + ', ' + place.address.state.name);
        infowindow.open(map, this);
    });

    return marker;
}


function showVisible() {



    // FIT ONLY VISIBLE MARKERS

}


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

I have a page where I can toggle on/off categories of markers. One marker (the 'property') will always be visible. I would like to zoom in as close as possible showing all visible markers.

So, if I have 3 markers close together I would like to zoom in all close as possible while still fitting the 3 markers.

var fullBounds = new google.maps.LatLngBounds();
var map;
var infowindow;
var markers = {};
var nearbyPlaces = {{#property}}{{{stringify nearbyPlaces}}}{{/property}};
var property = new google.maps.LatLng({{#property}}{{address.geo.lat}},{{address.geo.lng}}{{/property}});
var name = {{#property}}{{{stringify name}}}{{/property}}
var prop = {{#property}}{{{stringify address}}}{{/property}};


function initialize() {

    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: property,
        zoom: 15
    });

    var marker = new google.maps.Marker({
        map: map,
        icon: '../../../../img/map/property.png', // Set Property to a green marker
        position: property
    });

    infowindow = new google.maps.InfoWindow();

    // Set infowindow for the property
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(name + '<br/>' + prop.street + '<br/>' + prop.city + ', ' + prop.state.name);
        infowindow.open(map, this);
    });

    var l = nearbyPlaces.length;
    while (l--) {
        markers[nearbyPlaces[l].category] = [];
        createCategory(nearbyPlaces[l]);
    }

    console.log(map.getZoom());
}

function createCategory(item) {
    var l = item.places.length;
    while (l--) {
        var marker = createMarker(item.places[l]);
        markers[item.category].push(marker);
        console.log(item.category);

        switch(item.category){
            case 'Public Schools':
                marker.icon = '../../../../img/map/public_school.png';
                break;
            case 'Colleges':
                marker.icon = '../../../../img/map/college.png';
                break;
            case 'Preferred Employers':
                marker.icon = '../../../../img/map/work.png';
                break;
            default:
                marker.icon = '../../../../img/map/star.png'
        }

    }
}

function toggleCategory(name, el) {
    //map.fitBounds(fullBounds);
    var button = $(el);
    var visible = true;

    if (button.hasClass('active')) {
        visible = false;
    }

    button.toggleClass('active');


    var category = markers[name];
    for (var x = 0; x < category.length; x++){
        var lat = category[x].position.k;
        var lng = category[x].position.B;
        var point = new google.maps.LatLng(lat,lng);
        fullBounds.extend(point);
    }

    var l = category.length;
    console.log('cagegory length: ' + category.length);
    while (l--) {
        category[l].setVisible(visible);
    }

    showVisible();

}

function createMarker(place) {
//var lat = parseFloat(place.address.geo.lat);
//var lng = parseFloat(place.address.geo.lng);
//var point = new google.maps.LatLng(lat,lng);
//fullBounds.extend(point);
//console.log(place);

    var marker = new google.maps.Marker({
        map: map,
        title: place.title,
        icon: 'http://maps.google./mapfiles/ms/micons/red-dot.png',  // Set all other markers to red...
        position: new google.maps.LatLng(place.address.geo.lat, place.address.geo.lng)
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(place.title + '<br/>' + place.address.street + '<br/>' + place.address.city + ', ' + place.address.state.name);
        infowindow.open(map, this);
    });

    return marker;
}


function showVisible() {



    // FIT ONLY VISIBLE MARKERS

}


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

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Jul 9, 2014 at 18:13 MithrilhallMithrilhall 1,50288 gold badges3333 silver badges5252 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

What I do is after creating the Map instance and before creating any Marker instances is create a LatLngBounds instance. Then as I create my markers, I call the extend method of the LatLngBounds instance for each Marker created:

myLatLngBounds.extend( myMarker.getPosition() );

After all the markers are made, I call fitBounds on my map instance passing it the LatLngBounds:

myMap.fitBounds( myLatLngBounds );

these two lines did the trick for me:

bounds.extend(marker.position); 
map.fitBounds(bounds);

you're going to have to adapt this to your script though as this was taken directly from one of mine.

hope this helps!

Declare a new Google maps LatLngBounds object

var mapLatLngBounds = new google.maps.LatLngBounds();

... then for each marker, extend the map bounds

mapLatLngBounds.extend(marker.position);

For your map, set the center and bounds, based on the bounds that we've now defined

myMap.setCenter(mapLatLngBounds.getCenter());
myMap.fitBounds(mapLatLngBounds);

Marker positions are LatLng objects which is why you can pass them straight to the extend function. If you're dealing with custom location objects that specify lat and lng somehow, then when you're looping/creating locations, you'll need to create LatLng objects that you can pass to the extend function:

var latlng = new google.maps.LatLng(myLocations[i].Latitude, myLocations[i].Longitude);
mapLatLngBounds.extend(latlng);

本文标签： javascriptGoogle Map API v3show all visible markers with maximum zoomStack Overflow