Javascript 如何在移动浏览器中居中放置谷歌地图

我一直在努力修复屏幕中央的谷歌地图标记。但即使我尝试了各种方法，它仍然没有出现

我只能在手机浏览器的屏幕左上角看到部分地图。请帮帮我

这是JS

<script type="text/javascript">          
/*
 * Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
 * Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/
$( document ).on( "pageinit", "#map-page", function() {
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>');
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        google.maps.event.trigger(map, 'resize');

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        marker.getPosition(latlng) ;
        map.setCenter(latlng);
    }
    $("#map_canvas").width(window.innerWidth).height(window.innerHeight);
}); 
</script>

---

注意：这只发生在桌面上的移动浏览器中，它加载得很好

您的问题是用于触发地图初始化的页面事件

pageinit是一个错误的选择，因为jQuery Mobile尚未完全初始化pageshow是唯一可以正确计算内容高度的页面事件，当google maps v3 api计算可用地图空间时，该高度非常重要

因此，改变这一点：

$( document ).on( "pageinit", "#map-page", function() {

为此：

$( document ).on( "pageshow", "#map-page", function() {

---

您可以找到工作示例

好的，让我试试，伙计，我尝试将pageinit删除为$（文档）。就绪（函数）仍然不起作用，让我试试这个：（不要使用$（文档）。就绪（函数）对于jQuery Mobile，这是一个很大的禁忌。你应该看看我在我的示例中提供的一个链接。你需要知道的一切都写在那里。让我给你一些优秀的链接，这样你就可以了解为什么使用jQuery Mobile页面事件很重要，以及何时使用它们。第一个链接将告诉你文档就绪和页面就绪之间的区别init：第二个将告诉您各种页面事件之间的差异：

$( document ).on( "pageinit", "#map-page", function() {

$( document ).on( "pageshow", "#map-page", function() {