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?
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 
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>
+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 to share
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 to share