title: setCenter error Google maps V3
body: <p>I have trouble migrating from google maps API v2 to v3.</p>
  
  <p>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"</p>
  
  <p>Can someone help with that?
  Thank you.</p>
  
  <p>the original:</p>
  
  <p></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          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+"&lt;br/&gt;");
              });
              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]);
                  }
              }               
          }
  </code></pre>
  
  <p></p>
  
  <p>My modification:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          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+"&lt;br/&gt;");
              });
              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);
  </code></pre>
  
  <p></p>
  
  <p>Thank you.</p>