¿Cómo agrego marcadores a un mapa cuando se carga una página web por primera vez?

Parece que sería muy fácil llamar a una función y agregar marcadores a un mapa durante la carga de la página, sin embargo, no puedo hacer esto mientras la página se está cargando y tengo que presionar un botón de búsqueda después de que el mapa esté cargado y listo. . Intenté usar esta página:

http://www.mkyong.com/javascript/javascript-call-funtion-after-page-load/

Puse un script al final de mi cuerpo para llamar a la función 'addMarkers' pero no pasa nada. Solo puedo hacer que esta función funcione correctamente cuando la llamo usando un botón de búsqueda.

¿Cómo cargo los marcadores después de que el mapa se haya cargado automáticamente?

Aquí está mi cuerpo de html:

<body>
<TR>
    <TD>
        <div id="map" style="width: 1250px; height: 750px"></div>
    </TD>
    <TD>
        <!--field for start-->
        <p>Start Date Time:</p>
        <form method="post" action="">
    <!--addMarkers button is called and executed correctly when this button is pressed-->
            <input type="button" value="Search" onclick="addMarkers()">
        </form>
    </TD>
</TR>
   <!--this does nothing or is not executed as I hoped-->
<script>
    window.onload=addMarkers() ;
</script>
</body>

Mi función de carga para los mapas se encuentra al final de mi documento html:

<script type="text/javascript">
   //***************Function moved out of header***************************************************
var map;
    var markersArray = [];
    var startformat;
    var endformat;

function load() {

    var myOptions = {
      center: new google.maps.LatLng(42, -70),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"),myOptions);
alert("Click search to look for markers.");

}
load();
</script>

Avísame si hay algo que pueda aclarar.

EDITAR: addMarkers() usa la región del mapa mostrada y algo de texto de dos campos de texto. Como ha dicho la gente, parece que la función se ejecuta antes de que todo esté listo. Necesito que todo en la página se cargue primero y luego de alguna manera ejecutar addMarkers()...

Esto es lo que tengo ahora, pero funciona igual que antes. Los marcadores no se generan hasta que presiono el botón de búsqueda:

 //************Part of head***************************************************
  <script src="addcreateclear_Markers.js"></script> 
  <script type="text/javascript">


    var map;
    var markersArray = [];
    var startformat;
    var endformat;

    function load() {

    var myOptions = {
      center: new google.maps.LatLng(42, -70),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"),myOptions);
    addMarkers();
    //alert("Click search to look for markers.");

   }

</script>
</head>


 <!--************Function in body***************************************************-->
 <body onload='load()'>
 <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%>
<TR>
    <TD>
        <div id="map" style="width: 1250px; height: 750px"></div>


    </TD>
    <TD>
        <!--field for start-->
        <p>Start Date Time:</p>
        <form method="post" action="">
            <input type="button" value="Search" onclick="addMarkers()">
        </form>
    </TD>
</TR>


</TABLE>

<script>
window.onload = addMarkers();
</script>

</body>

MÁS EDICIONES: llamar a esta función al final del cuerpo html hace que esto funcione como quiero:

<script type="text/javascript">
function addMarkersLag() {
  //Print the map object out to the console
    console.log(map);
    //Zoom in on the map after 2 seconds so you can see this function being called
    window.setTimeout(function() {
    addMarkers();
        alert("Does it work?.");
    }, 1000);
}
</script>

preguntado el 03 de mayo de 12 a las 15:05

antes de que onload() sus marcadores de mapa, debe tener su mapa cargado primero. cuidado con la secuencia. -

nota al margen: siempre use minúsculas para las etiquetas. (<td> en lugar de <TD>) -

¿Dónde está tu código que agrega los marcadores? Además, debe agregar marcadores después de cargar el mapa. -

El código de @Pete para agregar marcadores está en la cabeza. ¿Cómo agrego los marcadores después de cargar el mapa? Cuando agrego el script de carga al encabezado, no funciona. -

@Stagleton ¿Le importaría publicar todo su código fuente? ¿Estás seguro de que tienes una referencia a la API de Google Maps? -

3 Respuestas

Pedí más código para poder darte una respuesta de la que estaba más seguro. Al igual que las otras respuestas aquí, la mía es un poco conjetura ya que no tenemos el código fuente completo.

Parece que movió su load() función hasta el final del archivo. entonces lo que puede estar pasando es que window.onload (tu addMarkers() función) se activa antes de que se ejecute el script del mapa. Si esto es incorrecto, simplemente comente y/o actualice su pregunta original con más información, por favor.

Vea aquí para una pregunta sobre cuando window.onload Está despedido.

EDITAR: Ver JSFiddle para el código de trabajo a continuación:

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function addMarkers() {
  //Print the map object out to the console
    console.log(map);
    //Zoom in on the map after 2 seconds so you can see this function being called
    window.setTimeout(function() {
        map.setZoom(10);
    }, 3000);
}
</script>
<body onload='load()'>
    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" ALIGN="Center" WIDTH=100%>
        <TR>
            <TD>
                <div id="map" style="width: 1250px; height: 750px"></div>
            </TD>
            <TD>
                <!--field for start-->
                <p>Start Date Time:</p>
                <form method="post" action="">
                    <input type="button" value="Search" onclick="addMarkers()">
                </form>
            </TD>
        </TR>
    </TABLE>
<script>
function load() {
    var myOptions = {
      center: new google.maps.LatLng(42, -70),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"),myOptions);
    alert("Click search to look for markers.");
}
load();
   //***************Function moved out of header***************************************************
var map;
    var markersArray = [];
    var startformat;
    var endformat;
addMarkers();
</script>

</body>

contestado el 23 de mayo de 17 a las 12:05

Oye, sí, creo que eso es lo que está pasando. He intentado cambiar mi código, pero parece que no puedo ejecutar la función addMarkers() después de que el mapa se haya representado. Intenté cambiar el orden, pero la función de carga () debe estar después de la mayoría de los scripts en el encabezado. Puedo intentar agregar más código si ayuda, pero he cambiado bastante el html y no quiero cambiar demasiado la pregunta: Stagleton

@Stagleton ¿Cómo funciona eso? Tuve que agregar el mío addMarkers() pero creo que esto es lo que quieres. Además, estamos tratando de responder a su pregunta, así que edite la publicación original tanto como sea necesario para brindarnos la información que necesitamos. La pregunta no ayuda a nadie, incluido usted, si no podemos responderla. - Pete

Hey gracias. Haciendo todo lo posible para agregar toda la información que necesita. Realmente aprecio la ayuda. Esto parece prometedor. Editaré más tarde hoy después de dormir un poco y actualizaré el progreso. gracias de nuevo. g-noche - Stagleton

@StagleTon Me alegra escucharlo, pero tenga en cuenta que no es realmente una gran solución para establecer un tiempo de espera como ese. tengo una actualizada Violín que simples llamadas addMarkers() from the load() función. De todos modos, encantado de ayudar. Buena suerte para ti. - Pete

sí, lo he intentado de esa manera antes y parece que no puedo hacerlo funcionar. La forma de tiempo de espera parece tosca pero funciona y espero poder obtener una mejor solución más adelante: Stagleton

Estas llamando al load() función antes de que el DOM termine de cargarse. Mueva la llamada a la función al cuerpo en su HTML:

<body onload='load()'>

Debe llamar a addMarkers() después de crear una instancia del objeto de mapa:

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

Aquí hay un ejemplo que muestra cómo cargar un marcador:

https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple (ver fuente)

contestado el 03 de mayo de 12 a las 15:05

No puedo hacer que funcione de esta manera. Mi método addMarkers() utiliza la información del área del mapa y la información de algunos campos siguientes para generar. tal vez eso es parte del problema. :-/- Stagleton

@andresf Pensé en montar un window.onload = fxn; se suponía que iba a llamar al fxn función después de el DOM se configuró y todas las imágenes terminaron de cargarse. Por qué está usted diciendo que load() ¿Se llama antes de que el DOM termine de cargarse? - sean mickey

@SeanMickey Porque el usuario tiene una función que creó llamada load(). el no esta hablando window.onload. Realmente no creo que haya suficiente información en su pregunta para responderla, pero parece no estar dispuesto a agregar más código... - Pete

@andresf Oh, está bien, lo entiendo. Pensé que estabas hablando de la onload que está asignado a addMarkers, cual is configurar con la línea: window.onload=addMarkers(). Es confuso porque el onload apunta a addMarkers y luego está el separado load. Solo quería asegurarme de que estaba rastreando contigo. Gracias - - sean mickey

Stagleton, ¿por qué no proporciona un enlace a su sitio? Tal vez necesite configurar un detector de eventos para disparar el addMarkers función después de que el mapa haya terminado de cargarse... - andresf

¿Por qué no simplemente llamar a la función directamente después de crear el mapa?

 <script type="text/javascript">
//***************Function moved out of header***************************************************
var map;
var markersArray = [];
var startformat;
var endformat;

function load() {

var myOptions = {
  center: new google.maps.LatLng(42, -70),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
alert("Click search to look for markers.");

addMarkers();    <---- ADDED HERE

}
load();
</script>

contestado el 03 de mayo de 12 a las 15:05

Lo he intentado pero no funciona. No estoy seguro de por qué. Lógicamente, parece que después de crear el mapa, la función addMarkers debería funcionar sin ningún problema. - Stagleton

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.