Question

Im trying to load google maps in a dynamic map container, but I can’t get it…

The process:
I click on a button, it makes an ajax call to show.php, and I want to show a google maps in a div loaded from show.php

js file:

var id = $(this).attr('rel');
var coords = jQuery(this).attr('coords');
jQuery.ajax({
                type: "POST",
                url: "show",
                data: "sec=load_shop&id=" + id,
                success: function(msg){
                    jQuery("#" + id).html(msg);
ini_map(coords, id);
                },
                error: function(msg){
                    console.log(msg.statusText);
                }
            });

ini_map function:

function ini_map(coords, id_shop) {
      var lat_lon = coords.split(",");

       var myOptions = {
                zoom: 15,
                center: new google.maps.LatLng(lat_lon[0],lat_lon[1]),
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

       var map = new google.maps.Map(document.getElementById('map_' + id_shop), myOptions);

       var infowindow = new google.maps.InfoWindow();

       var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,
                title: 'Dirección'
            });

        google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent("<strong>OKAY!</strong>");
                infowindow.open(map, this);
        });

   }

show.php

$id = $_POST['id'];
echo '<div id="map_'.$id.'" class="gmaps"></div>';

Ive checked with firebug that the php output is fine, ej.:

<div id="map_20" class="gmaps"></div>

But i get this error:

TypeError: 'null' is not an object (evaluating 'a[gb]')

I think that google maps api cannot find the map container.

Any idea how to do it ?

Thanks!

Answer 1

I solved it with:

https://developers.google.com/maps/documentation/javascript/basics?hl=es-ES#Async