How to make Google Maps work like Google Maps app in Android phones

As you can see in the picture, I have a zoom out button in the lower left corner of the screen. I want it to move a bit, or maybe add some new CSS to it to make it easier to use. Can anyone help me on this how to change this?

enter image description here

Thanks and Regards

.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( "pageshow", "#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);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        $( window ).resize(function() {
       google.maps.event.trigger(map, 'resize');
                      });

        map.setCenter(defaultLatLng);
    }

}); 
</script>

      

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><?php echo $translate->text('Ubicación Aproximada')?> </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>


</div>

      

Edit1

Added the following script to

$(window).bind( 'orientationchange', function(e){
    var ori = window.orientation ;
        w = (ori==90 || ori==-90) ? screen.height : screen.width;
        h = (ori==90 || ori==-90) ? screen.width : screen.height;
         $('#map-canvas').width(w);
         $('#map-canvas').height($(window).height()- $('#head1').height());


    });

      

result in enter image description here

Answer

Here is the answer to my question, it works the same as the google map app in mobile.

<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( "pageshow", "#map-page", function() {
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 

   $('#map-canvas').height( $(window).height() - $('#head1').height());
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            streetViewControl:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        // this is our gem
            google.maps.event.addDomListener(window, "resize", function() {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center); 
        }); 
}       
}); 
$(window).bind( 'orientationchange', function(e){
          var ori = window.orientation ;
            w = (ori==90 || ori==-90) ? window.height : window.width;
            $('#map-canvas').width(w);
            $('#map-canvas').height( $(window).height() - $('#head1').height());    

    }); 
</script>

      

enter image description here

+2


source to share


2 answers


Finally, I was able to fix the problem completely.

Here is the script



<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( "pageshow", "#map-page", function() {
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 

   $('#map-canvas').height( $(window).height() - $('#head1').height());
    drawMap(defaultLatLng); // Default to Hollywood, CA when no geolocation support
     //var latlng = marker.getPosition();
    function drawMap(latlng) {
        var myOptions = {
            zoom: 10,
            center: latlng,
            streetViewControl:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        // this is our gem
            google.maps.event.addDomListener(window, "resize", function() {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center); 
        }); 
}       
}); 
$(window).bind( 'orientationchange', function(e){
          var ori = window.orientation ;
            w = (ori==90 || ori==-90) ? window.height : window.width;
            $('#map-canvas').width(w);
            $('#map-canvas').height( $(window).height() - $('#head1').height());    

    }); 
</script>

      

It is now centered Just like the Google Map app on Android devices

+1


source


This was happening because my page had a title and the div with id # map-canvas was sized equal to the size of the window. If not specified, then the default is my guess.

So, I selected the title size and minus it with the window size and set it to the canvas map.

Like this

 var  v = $( window ).height();
        h= $('#head1').height();
        v = v - h;
   $('#map-canvas').height(v);

      



or

$('#map-canvas').height( $(window).height() - $('#head1').height());

      

So my complete code looks something like this.

<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( "pageshow", "#map-page", function() {
    <?php $coordenadas=explode(',',$fila['Googlemap']);?>

   var defaultLatLng = new google.maps.LatLng('<?php echo $coordenadas[0];?>','<?php echo $coordenadas[1];?>'); 
   var  v = $( window ).height();
        h= $('#head1').height();
        v = v - h;
   $('#map-canvas').height(v);
    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);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });
        $( window ).resize(function() {
       google.maps.event.trigger(map, 'resize');
                      });

        map.setCenter(defaultLatLng);
    }

}); 
</script>

      

+3


source







All Articles