Set Google maps coordinates as center screen

Question

I wrote a script which allows an admin to click on a map (google maps api v3) setting up as many locations as he wants, naming them. That is, clicking on the map shows an information window with a form for naming that location. These locations are saved in a database (LatLng coordinates) and show as markers on the map.

Then, users (admin or not) may choose any of these locations from a select box (by name). Once this is selected, there's an option for showing a map with a marker on the selected location. The marker shows correctly, but I would like the map to be centered in that location. That is, the marker in the center of the screen but, instead, it shows in the extreme upper left corner. Actually, initially, the marker isn't even visible. You have to drag the map up and left a little for it to show.

This is rather strange, as I use the same coordinates for both the marker and the center screen. Here's my code (or the relevant part, at least):

                var latlng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.ltn));
                var latlng2 = new google.maps.LatLng(parseFloat(location.lat) + 0.025, parseFloat(location.ltn) - 0.05);
                var map = new google.maps.Map($('.modal-body', modal)[0], {
                    'center': latlng,
                    'zoom': 13,
                    'mapTypeId': google.maps.MapTypeId.ROADMAP,
                });
                var marker = new google.maps.Marker({
                    'position': latlng,
                    'map': map,
                    'title': location.name,
                });
                marker.setMap(map);

Notice how in this sample I don't use the latlng2 value. This is what I tried, but it seems to only work for a given resolution. How can I center the map in those coordinates?

Best regards

Edit:

                $(map).focus();
                modal.on('shown', function() {
                    $(window).resize(function() {
                        google.maps.event.trigger(map, 'resize');
                    });
                    google.maps.event.trigger(map, 'resize');
                });

This part of code seems ok. Do you have anything else after it which could reposition the center? — Anto Jurković, Feb 06 '14 at 18:37
And yeah, I forgot to say. This is shown in a bootstrap modal, although I don't see why that would be relevant =) — André Fratelli, Feb 06 '14 at 19:19

score 3 · Answer 1 · answered Feb 06 '14 at 19:26

3

I'm not sure if this will work... If that window resize is cause than it might help. I don't know how it will interact with other code.

Add event listener for resize event:

    ...
    marker.setMap(map);

    google.maps.event.addListener(map, 'resize', function() {
        map.setCenter(latlng);
    });

answered Feb 06 '14 at 19:26

Anto Jurković

11,188
2
29
42

Funny. I was using latlng2, so it "seems" centered. I added your code, and it reversed the effect! Calling setCenter() actually takes the marker back to the upper left corner. – André Fratelli Feb 06 '14 at 20:21
I don't understant that behaviour. – Anto Jurković Feb 06 '14 at 20:55
check [this question](http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap) maybe you get some hint – Anto Jurković Feb 06 '14 at 21:02
1

It doesn't. It's a different issue which I solved already. Funny thing is, calling map.getCenter() yields the same coordinates as my latlng variable. I also though that maybe some part of the map could be hidden, but then used inspect element on chromium and the layout seems correct. – André Fratelli Feb 07 '14 at 13:42

Set Google maps coordinates as center screen

1 Answers1