CODEWITHSUNDEEP
javascriptcssgoogle-mapsjquery-mobile
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4886

How to center the google map in mobile browser

I have been trying really hard to fix the marker of my google map in the center of the screen . But even though I tried all kind of methods its still doesn't appear .

I can only see part of the map at top left corner of the screen in the mobile browser . Please help me out

Here is the 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>

and this is the html

<div  data-shadow="false" data-theme="c"  id="map-page"  data-role="page">
<div data-role="header" style="background:#006699 !important;color:#fff;">
<a data-rel="back" href="#pageone"  class="ui-nodisc-icon ui-new-btn" data-icon="location" data-iconpos="notext"  data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="d" title="Close">Go to Page One</a>
<h1>Header1 </h1>
<a data-rel="back"  href="#pageone"  class="ui-nodisc-icon ui-new-btn" data-icon="delete" data-iconpos="notext"  data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="d" title="Close">Back</a> 
</div>

    <div role="main" class="ui-content" id="map-canvas">
        <!-- map loads here... -->
    <!---</div> ---->
</div>
</div>

CSS

#map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }

Note: This happens only in mobile browser in desktop it loads fine

Upvotes: 1

Views: 1258

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Your problem is page event you are using to trigger map initialization.

pageinit is a bad choice because jQuery Mobile is still not fully initialized. pageshow is only page event where content height can be calculated correctly, and that heigh is important when google maps v3 api calculates available maps space.

So change this:

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

to this:

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

You can find working examples here.

Upvotes: 1

Related Questions