在动态地图容器中加载Google地图?

时间:2012-04-27 18:10:35

标签: jquery ajax google-maps-api-3

我试图在动态地图容器中加载谷歌地图,但我无法得到它......

流程: 我点击一个按钮,它对show.php进行ajax调用,我想在show.php加载的div中显示一个谷歌地图

js文件:

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 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>';

我用firebug检查过php输出没问题,ej。:

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

但是我收到了这个错误:

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

我认为google maps api找不到地图容器。

知道该怎么做吗?

谢谢!

1 个答案:

答案 0 :(得分:1)