Añadir marcador en Google Maps al cargar página con ajax

[PoLiZe]

Hola, bueno soy muy nuevo en el tema de ajax, y logré cargar desde una sección donde muestro todas las "entradas" por así decirlo, de la DB, cargar la información de una sola, con ajax.

Osea lo que hago es que desde /?pagina=bandas al seleccionar una de las bandas cargue una parte de /?pagina=bandas&tag=bam (por ejemplo)

El tema se me complica al hacerlo con la agenda, por el hecho de que cuando voy a la sección de cada evento, me tiene que mostrar el mapa de google con la ubicación del evento, pero no lo hace por el simple hecho de que no carga el javascript correctamente.


Intenté hacerlo de esta forma, en ?pagina=agenda tengo este javascript:

Código Javascript:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
      var markers = [];
 
      function initialize() {
        var haightAshbury = new google.maps.LatLng(-51.62534, -69.22603);
        var mapOptions = {
          zoom: 12,
          center: haightAshbury,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
        
 
       
        
        
      }
 
      // Add a marker to the map and push to the array.
      function addMarker(location) {
          location = new google.maps.LatLng(location);
        marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }
 
      // Sets the map on all markers in the array.
      function setAllMap(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }
 
      // Removes the overlays from the map, but keeps them in the array.
      function clearOverlays() {
        setAllMap(null);
      }
 
      // Shows any overlays currently in the array.
      function showOverlays() {
        setAllMap(map);
      }
 
      // Deletes all markers in the array by removing references to them.
      function deleteOverlays() {
        clearOverlays();
        markers = [];
      }
 
      google.maps.event.addDomListener(window, 'load', initialize);
 
  
    
</script>
 

y en la página donde se muestra cada evento, agregé esto:

Código HTML:

 <img src="/blank.gif" alt="" onload="initialize();" />
                  <img src="/blank.gif" alt="" onload="addMarker(<?php echo $coordenadas; ?>);"

Pero no funciona!

¿Donde está el error?
¿De que otra forma lo podría hacer más fácil?


Desde ya muchas gracias!

Edit: La página es www.brotecolectivo.com/?pagina=agenda

[PoLiZe]

¿alguna ayuda? :(

[PoLiZe]

Tema Solucionado, al final logré hacerlo bien, gracias igual!

[Sandala]

Hola, espero que aún pudieras resolver mi duda ya que ha pasado demasiado tiempo que publicaste esto.

Mira lo que pasa es que estoy haciendo algo similar, tengo mis datos y coordenadas guardadas en mi BD, pero no logro hacer que esos datos se pinten en forma de puntos o marcadores en mi mapa. Leí que ya habías encontrado una solución a tu problema que es idéntico al que yo me encuentro ahora. Pjalá aún pueda recibir un poco de tu ayuda.

Gracias