google map javascript v3 wont display correctly

  • Replies:0
1
Rotem Levi
  • Forum posts: 1

Dec 23, 2012, 5:24:50 PM via Website


I have 2 divs, one is always hidden. When the user clicks on the map
button that on the navigation bar the direction div his displayed and
the map div is hidden after a route has been selected and the user
returns to the map div in my android motorola razor only a part of
the map appears only when the phone his being tilt then the map
refreshed and appears normally. and on ipone ios 5 nothing appears.
anyone can tell me what i`m doing wrong?




[code]
<!DOCTYPE html>
<html>
<head>
<title>Simple V3 Map for Android</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


<script type="text/javascript">

var map;
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var Mylocation;
var TRAVEL_MODE="DRIVING";
var Endcounter=0;

function requestHandler(centerAt,latitude,longitude,calcRoute,start,end,waypts)
{
if (centerAt==true)
{
if (latitude && longitude)
centerAt(latitude, longitude);
}
if (calcRoute==true)
{
if (start && end && waypts)
calcRoute(start,end,waypts);
}
}





function initialize()
{
var width = (parseInt($(window).width())) ;
var height = (parseInt($(window).height())) ;
var header_height= $("#indexPage").find('[data-role="header"]').outerHeight();
var footer_height=$("#indexPage").find('[data-role="footer"]').outerHeight();

var height = ($(window).height() - header_height); //-footer_height);

$("#map_canvas").width(width).height(height);

Mylocation= new google.maps.LatLng(41.850032,-87.6500532);

var myOptions = {
zoom: 8,
center: Mylocation,
panControl:false,
streetViewControl:false,
disableDefaultUI:true,
zoomControl:false,
zoomControlOptions:{position: google.maps.ControlPosition.BOTTOM_LEFT,style: google.maps.ZoomControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));

var start = document.getElementById('start');
var end = document.getElementById('end');
var autocompleteStart = new google.maps.places.Autocomplete(start);


var autocompleteEnd = new google.maps.places.Autocomplete(end);

$(directionsPanel).hide(); // hide the direction panel at the begining

$(DRIVING).bind('click', function() {
TRAVEL_MODE="DRIVING";
});

$(TRANSIT).bind('click', function() {
TRAVEL_MODE="TRANSIT";
});
$(WALKING).bind('click', function() {
TRAVEL_MODE="WALKING";

});

$(BICYCLING).bind('click', function() {
TRAVEL_MODE="BICYCLING";
});



$(map_butt).bind('click', function() {
$(map_canvas).show();
map.setZoom(12);
$(directionsPanel).hide();
});

$(direction_butt).bind('click', function() {

$(map_canvas).hide();
$(directionsPanel).show();
});


$(Add_Destination).bind('click', function() {
myClone = $(end).clone();
Endcounter++;
myClone.attr("id", "end" + Endcounter);
myClone.attr("value", "");


$(Destination).append(myClone); // append the input to Destination div
$(end1).css("background-color","#FF0");
var g = document.getElementById('end' + Endcounter);
$('end'+Endcounter).wrap('<div class="imageInputWrapper"></div>');
var autocompleteEnd = new google.maps.places.Autocomplete(g);
});
}


function computeTotalDistance(result)
{
var total = 0;
var myroute = result.routes[0];

for (i = 0; i < myroute.legs.length; i++)
{
total += myroute.legs[i].distance.value;
}

total = total / 1000.
document.getElementById('total').innerHTML = total + ' km';
}


var fun1 = function() {computeTotalDistance(directionsDisplay.directions);}
google.maps.event.addListener(directionsDisplay, 'directions_changed', fun1);

google.maps.event.addDomListener(window, 'load', initialize);

function centerAt(latitude, longitude)
{
myLatlng = new google.maps.LatLng(latitude,longitude);
map.panTo(myLatlng);
}


function calcRoute(start,end,waypts)
{

var waypts = [];
var checkboxArray = document.getElementById('waypoints');

for (var i = 0; i < checkboxArray.length; i++)
{
if (checkboxArray.options[i].selected == true)
{
waypts.push({location:checkboxArray[i].value,stopover:true});
}
}

var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode[TRAVEL_MODE]
};}

function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];



for (var i = 1; i <= Endcounter ; i++)
{
var temp = document.getElementById("end"+i).value;

if (temp!="")
{
waypts.push({location:temp,stopover:true});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode[TRAVEL_MODE]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});

}

</script>


<style>


/* custom icons */
.ui-icon-DRIVING{background: url(graphics/DRIVING.png) 50% 50% no-repeat; background-size: 40px 27px;}
.ui-icon-TRANSIT{background: url(graphics/TRANSIT.png) 50% 50% no-repeat; background-size: 40px 27px;}
.ui-icon-WALKING{background: url(graphics/WALKING.png) 50% 50% no-repeat; background-size: 40px 27px;}
.ui-icon-BICYCLING{background: url(graphics/BICYCLING.png) 50% 50% no-repeat; background-size: 40px 27px;}
.ui-icon-MAP{background: url(graphics/map-icon.png) 50% 50% no-repeat; background-size: 16px 16px;}
.ui-icon-DIRECTION{background: url(graphics/instructions-icon.png)) 50% 50% no-repeat; background-size: 16px 16px;}

.imageInputWrapper {
background-color:#339;
cursor:pointer;
}


.ui-header .ui-title { margin-right:20px; margin-left:20px; }
.ui-footer .ui-title { margin-right:20px; margin-left:20px; white-space:normal; }
.ui-btn-inner { padding: .6em 7px; }
.ui-body-e { border: 1px solid #66eedd; color: #222222; text-shadow: 0 0px 0 #fff; background: #c2e4d2; }
#page-map, #content, #map_canvas { width: 100%; height: 100%; padding: 0; }
#map_canvas { min-height: 100%; }

.fading-msg {
padding: .6em; text-shadow: none; text-align: center; margin: 120px auto; font-weight: bold;
border: 0; max-width: 260px; min-width: 110px;
}


</style>

</head>

<body>

<div data-role="page" data-position="fixed" id="page-map">
<div data-role="header" data-fullscreen="true" data-position="fixed" >
<div id="map_navbar" data-role="navbar">
<ul>
<li><a id="map_butt" data-icon="MAP">map</a></li>
<li><a id="direction_butt" data-icon="DIRECTION">direction</a></li>
<li><a href="#" data-icon="" data-transition="pop">Three</a></li>
</ul>
</div>

</div>


<div data-role="content">
<div id="map_canvas" ></div>
<div id="control_panel"></div>
<div id="directionsPanel" style="width:100%;height:100%" >
<div> Total Distance: <p id="total"></p></div>

<input id="start" placeholder="הכנס כתובת התחלה" type="text" >
<input id="end" placeholder="הכנס כתובת יעד" type="text" >
<div id="Destination"> </div>
<a href="#" id="Add_Destination">הוסף יעד</a>
<div data-role="controlgroup" data-type="horizontal">

<a data-role="button" id="DRIVING" data-icon="DRIVING" data-iconpos="notext">Delete</a>
<a data-role="button" id="TRANSIT" data-icon="TRANSIT" data-iconpos="notext">Delete</a>
<a data-role="button" id="WALKING" data-icon="WALKING" data-iconpos="notext">Delete</a>
<a data-role="button" id="BICYCLING" data-icon="BICYCLING" data-iconpos="notext">Delete</a>

</div>


<br>
<br>
<input type="button" onClick="calcRoute();">

</div>
</div>

</div>

</body>
</html>
[/code]

Reply