CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
André Fratelli
André Fratelli

Reputation: 6068

Set Google maps coordinates as center screen

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');
                });

Upvotes: 1

Views: 2767

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

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);
    });

Upvotes: 3

Related Questions