Google Maps - single map marker with fitBounds

Question

I've added markers to a Google map and used map.fitBounds() to zoom the map out so that the markets sit at the edge of the map. This is working.

There are, however, some problems when just showing the one marker.

The first issue is that it shows the maps center (which you have to provide) before it shows the location itself.
The second issue is that it zooms in as far as possible, rather than the zoom level specified in the options. I assume this has something to do with the fitBounds().

You can see the site here:

http://198.211.123.245/tga-directory/directory/

If you click on one of the businesses it'll take you to the single page with just one marker.

Here is my code:

jQuery(document).ready(function ($) {

    function initialize() {

        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(51.4800, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        setMarkers(map, data.companies);

        infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
    }

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

    function setMarkers(map, markers) {

        for (var i = 0; i < data.companies.length; i++) {

            var company = data.companies[i];

            var LatLng = new google.maps.LatLng(company['lat'], company['long']);

            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: company['name'],
                html: '<div style="width:200px; height:100px;">' + company['name'] + '<br><a href="' + company['link'] + '">View</a></div>',
            });

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': company['address']
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    markerBounds.extend(results[0].geometry.location);
                    map.fitBounds(markerBounds);
                }
            });

        }
    }

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

Cheers.

1) What is *the one marker*? I don't see any location change, but what about providing the right coordinates at first? 2) Well... yes, the `fitBounds()` method will change your map bounds (zoom level and center). We can't tell you what to do if we don't know what you want to achieve! Try to give us more info. — MrUpsidown, Jul 04 '14 at 15:17
But... why do you use the geocoder if you already know the companies coordinates (lat, long)? You are creating markers at specific coordinates then geocoding the address to extend the bounds? That doesn't really make sense... — MrUpsidown, Jul 04 '14 at 15:19
Sorry, I wasn't clear. You can view the single map by clicking on one of the locations. It'll then have one marker. — Steven Jones, Jul 04 '14 at 18:19
I thought map.fitBounds() took NW and SE instead of coordinates? If you've got some code to improve mine as well as help with the issue, that'd be great. — Steven Jones, Jul 04 '14 at 18:29
possible duplicate of [google maps api initial zoom error](http://stackoverflow.com/questions/14343140/google-maps-api-initial-zoom-error/14343371#14343371) — geocodezip, Jul 04 '14 at 19:50

Google Maps - single map marker with fitBounds

0 Answers0