Question

我想使用JavaScript动态嵌入Google地图。但是我不断收到错误：未定义Google。我正在从另一个函数调用map函数。

这是我尝试过的。

//The below if statement is run by a send function which sends a POST statement and gets MAP as data on success 
if (res == 'MAP')
                {
                  $('#map_class').prepend('<div class="col2 column1 first" id="mapy"><div class="sec2map" style="overflow:hidden;height:550px;width:100%;"><div id="map"></div><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script></div></div>');
                   init();
                }

function init() {

    var mapOptions = {
    // How zoomed in you want the map to start at (always required)
    zoom: 11,

    // disable UI
    disableDefaultUI: true,

    // The latitude and longitude to center the map (always required)
    center: new google.maps.LatLng(40.6700, -73.9400), // New York

    // How you would like to style the map.
    // This is where you would paste any style found on Snazzy Maps.
     styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}] };

// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');

// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);

// Let's also add a marker while we're at it
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.6700, -73.9400),
        map: map,
        title: 'Snazzy!'
    });
}

当我尝试调用init（）时；从控制台添加了地图，但是当我尝试从另一个函数运行时，我得到一个错误；

Answer 1

据我了解，您的问题是，在正确加载Google地图库之前，您正在调用init()函数。

如果您使用的是jQuery

在

中环绕代码

    $(function(){
        // code here
    });

和在js中将代码括在document.load函数中

动态地从另一个函数运行javascript函数

1 个答案: