Google Maps: Set Center, Set Center Point and Set more points

Question

I am using Google Maps V3 and I want to:

1. Set the center of the map to a particular latlng. I am using:

   map.setCenter(new google.maps.LatLng(mylat,mylong)); 

2. Set a point in that center spot. I am currently using:

   var point = new google.maps.LatLng(mylat,mylong);  marker = map_create_marker(point,"My Popup",map_icon_red); 

   With this function:

   function map_create_marker(point,html,icon) {     var marker =    new google.maps.Marker({         position: point,         map: map,         icon: icon,         shadow: map_icon_shadow     });      if(html!="") {         var infowindow = new google.maps.InfoWindow({                 content: html         });         google.maps.event.addListener(marker, 'click', function() {             infowindow.open(map,marker);         });     }     return marker; } 

3. Position many more markers using the same method above

The problem is that when I set the center like above, it only ever displays the first marker. But if I don't set a center it displays all the markers. How can I get them to both work?

Here is the full javascript code:

<script type="text/javascript"         src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" language="JavaScript">     var map;      var map_icon_green = new google.maps.MarkerImage(         "http://mysite.com/green_pointer.png",         new google.maps.Size(12,20),         new google.maps.Point(0,0));      var map_icon_blue = new google.maps.MarkerImage(         "http://mysite.com/blue_pointer.png",         new google.maps.Size(12,20),         new google.maps.Point(0,0));      var map_icon_yellow = new google.maps.MarkerImage(         "http://mysite.com/yellow_pointer.png",         new google.maps.Size(12,20),         new google.maps.Point(0,0));      var map_icon_red = new google.maps.MarkerImage(         "http://mysite.com/red_pointer.png",         new google.maps.Size(12,20),         new google.maps.Point(0,0));      var map_icon_shadow = new google.maps.MarkerImage(         "http://mysite.com/shadow.png",         new google.maps.Size(28,20),         new google.maps.Point(-6,0));      var map_crosshair = new google.maps.MarkerImage(         "http://mysite.com/cross-hair.gif",         new google.maps.Size(17,17),         new google.maps.Point(0,0));       function map_loader() {         var myOptions = {             zoom: 5,             mapTypeId: google.maps.MapTypeId.ROADMAP,             scrollwheel:false         }          map = new google.maps.Map(                 document.getElementById('map_container'), myOptions);          map.setCenter(new google.maps.LatLng(53.0,-1.0));          // <![CDATA[         var point = new google.maps.LatLng(53.0,-4.0755);         marker = map_create_marker(point,"some html which is OK",map_icon_red);         // ]]>          // <![CDATA[         var point = new google.maps.LatLng(-24.0,25.0);         marker = map_create_marker(point,"some html which is OK",map_icon_red);         // ]]>          // <![CDATA[         var point = new google.maps.LatLng(54.0,-2.0);         marker = map_create_marker(point,"some html which is OK",map_icon_red);         // ]]>          map.disableDoubleClickZoom = false;     }       function map_create_marker(point,html,icon) {         var marker =    new google.maps.Marker({             position: point,             map: map,             icon: icon,             shadow: map_icon_shadow         });          if(html!="") {             var infowindow = new google.maps.InfoWindow({                     content: html             });             google.maps.event.addListener(marker, 'click', function() {                 infowindow.open(map,marker);             });         }         return marker;     }     var map_set_center = 0;     function map_load_resize() {         if(map_set_center==0) {              map.setCenter(new google.maps.LatLng(53.0,-1.0));         }         map_set_center = 1;     }      </script>    

Answer 1

Try using this code for v3:

gMap = new google.maps.Map(document.getElementById('map'));  gMap.setZoom(13);      // This will trigger a zoom_changed on the map gMap.setCenter(new google.maps.LatLng(37.4419, -122.1419)); gMap.setMapTypeId(google.maps.MapTypeId.ROADMAP);