通过在运行时传递Div来渲染GoogleMap

时间:2014-02-14 15:09:34

标签: javascript google-maps

我有一个函数,我在其中传递一个页面的div,其中GoogleMap将显示在页面上。 Div ID正确显示但是当GoogleMap要显示Map时,它会给出以下错误。

<a data-transition="slide" onclick="showGoogleMap('AusMapDiv','#AustpaymentLocationsPage','151.209349','-33.840835')">Australia</a>


var myLatitude , myLongitude , pagediv ;
function showPosition(position) {
    var myCenter = new google.maps.LatLng(myLatitude, myLongitude);
    var mapProp = { center : myCenter,  zoom : 5,   mapTypeId : google.maps.MapTypeId.ROADMAP   };

    var map = new google.maps.Map( pagediv , mapProp);
    var marker = new google.maps.Marker({   position : myCenter });
    marker.setMap(map);
}

function showGoogleMap(pgdiv, locpage, logit, lati) {
    myLongitude = logit;
    myLatitude = lati;
    pagediv = pgdiv;

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, function(){      
                  console.log("Error while showing GoogleMap"); });
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }

    $.mobile.changePage(locpage , { transition: "slide"});
}

1 个答案:

答案 0 :(得分:0)

如果pgdiv是包含地图的div的id,则行:

var map = new google.maps.Map( pagediv , mapProp);

应更改为:

var map = new google.maps.Map( document.getElementById(pagediv), mapProp);

Map()构造函数的规范:

Map(mapDiv:Node, opts?:MapOptions)

其中mapDiv是DOM元素,而不是div元素的id。