Map Boundaries about googlmapper HOT 12 CLOSED

Hi there,

Yeah you should be able to call something along the lines of:

maps[0].map.getBounds();

from googlmapper.

Also, by default, maker clusters will appear, when at a certain zoom level, with a certain number of markers.

from googlmapper.

Sorry for the dumb question, but how should I use the getBounds?

If I understood correctly, I should:
1 - Just show the map, without any marker. But create a function eventAfterLoad.
2 - In this function I will call an API from the server (Ajax?), via javascript, passing the getBounds values.
3 - With the results, I will dinamically will add it using the google maps javascript functions.

Is this the correct way?
How about the clusters markers? My main concern on using it is that if I download all my markers at once, it will be huge the size of the response and will delay a lot to show them. Or not?

Cheers,
Joao

from googlmapper.

Yeah, that seems exactly the correct solution. An ajax event after load, to load items in the current view space.

Clusters wont aid in loading speed, as all markers are loaded initially, then replaced with clusters when a number appear in close proximity.

from googlmapper.

HI,

how can i get the map in modal box.I have a list of items with maps.I need to show on clicking the map icon to popup a modal box with appropriate map.

from googlmapper.

Hi,

You should be able to render a default map in a modal in HTML with the content hidden, when the map icon is clicked, you could unhide the map, and then fire a call to update the maps location.

var location = new google.maps.LatLng(45, 19);

// Change map position
maps[0].map.setCenter(location);

// Add a new marker
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(45, 19),
    map: maps[0].map,
    title: 'Hello World!'
});

// Add an information window
var infowindow = new google.maps.InfoWindow({
    content: 'Hello World!'
});

// Add an information window event
google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(maps[0].map, marker);
});

from googlmapper.

Thank you so much for your replay.Its helped me a lot.But the issue is ..the modal is blank on first time.And we click for inspect element the map is reloading with the new parameters.

from googlmapper.

Would you be able to provide some of your code for me to look over.

from googlmapper.

Modal

Javascript

$(document).ready(function(){
$('.modal-link').click(function(e){
e.preventDefault();
var data = $(this).data("id").split(',');
$('#myModal').modal('show');
var location = new google.maps.LatLng(data[0], data[1]);
maps[0].map.setCenter(location);

    // Add a new marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[0], data[1]),
        map: maps[0].map,
        title: 'Hello World!'
    });

// Add an information window
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!'
});

// Add an information window event
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(maps[0].map, marker);
});

});
});

from googlmapper.

I solved.Thank you for your support sir.Last few hours I was searching for the solution for getting the map in modal box.Your replay helped me to do the things.Many many thanks

from googlmapper.

Ah that's great, what was the solution?

from googlmapper.

I've updated the modal, for resizing the loaded new map, using the trigger method as follows

// Add an information window event
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(maps[0].map, marker);
});

    google.maps.event.trigger(maps[0].map, "resize");
    maps[0].map.setCenter(location);

from googlmapper.