javascript - script - Google Maps: establecer centro, establecer punto central y establecer más puntos

marcar puntos en google maps api

Question

Estoy usando Google Maps V3 y quiero:

1. Establezca el centro del mapa en un latlng particular. Estoy usando:

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

2. Establezca un punto en ese punto central. Actualmente estoy usando:

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

   Con esta función:

   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. Coloque muchos más marcadores usando el mismo método anterior

El problema es que cuando configuro el centro como arriba, solo muestra el primer marcador. Pero si no configuro un centro, muestra todos los marcadores. ¿Cómo puedo hacer que ambos trabajen?

Aquí está el código completo de JavaScript:

<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

Intenta usar este código para 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);