setCenter error Google maps V3

Question

I have trouble migrating from google maps API v2 to v3.

I can display the the map, but when I try to display the markers based on search results served from database, the map stops working. I'm getting error "Cannot call method setCenter"

Can someone help with that? Thank you.

the original:

    <script type="text/javascript">
        var points =new Array();
        var pointtexts =new Array();
        var pointflags =new Array();
        var map, bounds;
        var baseIcon = new GIcon();
        baseIcon.shadow = "flag_shadow_small.png";
        baseIcon.iconSize = new GSize(11, 25);
        baseIcon.shadowSize = new GSize(13, 27);
        baseIcon.iconAnchor = new GPoint(5, 12);
        baseIcon.infoWindowAnchor = new GPoint(11, 2);
        baseIcon.infoShadowAnchor = new GPoint(11, 2);

        function createMarker(point, detail, paidFlag) {
            var markIcon = new GIcon(baseIcon);
            if (paidFlag) {
                markIcon.image = "flag_blue_small.png";
            }
            else {
                markIcon.image = "flag_black_small.png";
            }
            var marker = new GMarker(point, {icon:markIcon});                   
            GEvent.addListener(marker,"click", function() {
                map.openInfoWindowHtml(point, detail+"<br/>");
            });
            bounds.extend(point);
            return marker;
        }

        function showAddress(point, propdetail, paidFlag) {
            if (!point) {
                alert(point + " not found");
            } else {
                var pointarray = point.split(",");
                var latlng = new GLatLng(pointarray[0],pointarray[1]);
                map.addOverlay(createMarker(latlng, propdetail, paidFlag));
                recentre(points.length);
            }
        }

        function recentre(items) {
            var zlevel, newCentre, place;
            place = items + 1;
            if (items==1){
                zlevel=10;

            }
            else{
                zlevel=map.getBoundsZoomLevel(bounds);
            }
            newCentre = bounds.getCenter();
            map.setCenter(newCentre,zlevel);
            map.savePosition();
        }           

        // Call this function when the page has been loaded
        function initialize() {
            if (GBrowserIsCompatible()) {
                bounds = new GLatLngBounds();
                map = new GMap2(document.getElementById("google_div"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GOverviewMapControl());
                map.addControl(new GMapTypeControl());
                map.enableDoubleClickZoom();
                map.setCenter(new GLatLng(56.866991,-4.185791), 6);
                for (var singlepoint in points) {
                    showAddress(points[singlepoint], pointtexts[singlepoint], pointflags[singlepoint]);
                }
            }               
        }

My modification:

<script type="text/javascript">
        var points =new Array();
        var pointtexts =new Array();
        var pointflags =new Array();
        var map, bounds;
        var baseIcon = new google.maps.MarkerImage();
        baseIcon.shadow = "flag_shadow_small.png";
        baseIcon.iconSize = new google.maps.Size(11, 25);
        baseIcon.shadowSize = new google.maps.Size(13, 27);
        baseIcon.iconAnchor = new google.maps.Point(5, 12);
        baseIcon.infoWindowAnchor = new google.maps.Point(11, 2);
        baseIcon.infoShadowAnchor = new google.maps.Point(11, 2);

        function createMarker(point, detail, paidFlag) {
            var markIcon = new google.maps.MarkerImage(baseIcon);
            if (paidFlag) {
                markIcon.image = "flag_blue_small.png";
            }
            else {
                markIcon.image = "flag_black_small.png";
            }
            var marker = new google.maps.Marker(point, {icon:markIcon});                    
            google.maps.event.addListener(marker,"click", function() {
                map.openInfoWindowHtml(point, detail+"<br/>");
            });
            bounds.extend(point);
            return marker;
        }


        function showAddress(point, propdetail, paidFlag) {
            if (!point) {
                alert(point + " not found");
            } else {
                var pointarray = point.split(",");
                var latlng = new google.maps.LatLng(pointarray[0],pointarray[1]);
                /*map.addOverlay(createMarker(latlng, propdetail, paidFlag));*/
                /*createMarker.setMap(latlng, propdetail, paidFlag);*/
                overlay = new createMarker(latlng, propdetail, paidFlag);
                recentre(points.length);
            }
        }


        function recentre(items) {
            var zlevel, newCentre, place;
            place = items + 1;
            if (items==1){
                zlevel=10;

            }
            else{
                /*zlevel=map.getBoundsZoomLevel(bounds);*/
                zlevel=new google.maps.LatLngBounds();
            }
            newCentre = bounds.getCenter();
            /*map.setCenter(newCentre,zlevel);*/
            map.setCenter(newCentre,zlevel);
            map.savePosition();
        }


    function initialize() {
        bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                zoom: 6,
                center: new google.maps.LatLng(56.866991,-4.185791),
                panControl: true,
                zoomControl: true,
                scaleControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            for (var singlepoint in points) {
            showAddress(points[singlepoint], pointtexts[singlepoint], pointflags[singlepoint]);
            }

            var map = new google.maps.Map(document.getElementById('google_div'),mapOptions);

            setMarkers(map, point, detail, paidFlag);       
    }


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

Thank you.

Answer 1

The setCenter function on the map class in API v3 only takes one parameter, the LatLng object to centre it on. You're passing in two parameters, hence the error:

map.setCenter(newCentre,zlevel);

You probably just want to do:

map.setCenter(newCentre);

Answer 2

In function recentre map is undefined, because in the function initialize you redeclare map change this:

var map = new google.maps.Map(document.getElementById('google_div'),mapOptions);

in

map = new google.maps.Map(document.getElementById('google_div'),mapOptions);

Answer 3

function createMarker

Instantiates instances of GMarker that go out of scope and destroy locally in the function block after the call to createMarker.

When you instantiate GMarker with an object literal you need to construct the GIcon in the call to the constructor prototype of GMarker.

This applies to ver 2.

Answer 4

Here is the working code:

<script type="text/javascript">
        var points =new Array();
        var pointtexts =new Array();
        var pointflags =new Array();
        var map, bounds;

        function createMarker(point, detail, paidFlag) {
            var flagURL;
            if (paidFlag) {
                flagURL = 'flag_blue_small.png';
            }
            else {
                flagURL = 'flag_black_small.png';
            }

            var infowindow = new google.maps.InfoWindow({
                content: detail 
            });

            var image = {
                url: flagURL,
                size: new google.maps.Size(11, 25),
                origin: new google.maps.Point(0,0),
                anchor: new google.maps.Point(11, 25)
            };

            var marker = new google.maps.Marker({
                position: point,
                map: map,
                icon: image,
                shadow: 'flag_shadow_small.png',
                title:''
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
            bounds.extend(point);
            marker.setMap(map);
        }

        function showAddress(point, propdetail, paidFlag) {
            if (!point) {
                alert(point + " not found");
            } else {
                var pointarray = point.split(",");
                var latlng = new google.maps.LatLng(pointarray[0],pointarray[1]);
                createMarker(latlng, propdetail, paidFlag);
                recentre(points.length);
            }
        }

        function recentre(items) {
            var zlevel, newCentre, place;
            place = items + 1;
            if (items==1){
                zlevel=10;
                map.setZoom(zlevel);
            }
            else{
                //map.panToBounds(bounds);
                map.fitBounds(bounds);
            }
            newCentre = bounds.getCenter();
            map.setCenter(newCentre);
            //map.setZoom(zlevel);
        }

    function initialize() {
        bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                zoom: 7,
                center: new google.maps.LatLng(56.866991,-4.185791),
                panControl: true,
                zoomControl: true,
                scaleControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById('google_div'),mapOptions);  

            for (var singlepoint in points) {
            showAddress(points[singlepoint], pointtexts[singlepoint], pointflags[singlepoint]);
            }
    }

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