I'm trying to make an app with monaca ide and onsen-ui.
my problem is that google maps is loading only if is on active page if is in different page is not working. I tried a multiple things but nothing worked.
Can you please suggest what I'm doing wrong?
Here is my code:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
<script src="http://maps.google.se/maps/api/js?sensor=false"></script>
<script src="js/maps.js"></script>
<script>
ons.bootstrap();
</script>
</head>
<body>
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Master Details</div>
</ons-toolbar>
<ons-list>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">Item Title</span>
<span class="item-label">4h</span>
</header>
<p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">Another Item Title</span>
<span class="item-label">6h</span>
</header>
<p class="item-desc">Ut enim ad minim veniam.</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">Yet Another Item Title</span>
<span class="item-label">1day ago</span>
</header>
<p class="item-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Details</div>
</ons-toolbar>
<ons-list modifier="inset" style="margin-top: 10px">
<ons-list-item class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">Title</span>
<span class="item-label">Foobar</span>
</header>
<p class="item-desc">desc</p>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" id="add-note-action" class="add-note-action-item">
<ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
Add a note
</ons-list-item>
</ons-list>
<ons-list style="margin-top: 10px">
<ons-list-item class="item">
<header>
<span class="item-title">Lorem ipsum dolor sit amet</span>
</header>
<p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</ons-list-item>
</ons-list>
<div id="map"></div>
</ons-page>
</ons-template>
</body>
</html>app.js
(function(){
'use strict';
var currentItem = {};
$(document).on('pageinit', '#detail-page', function() {
$('.item-title', this).text(currentItem.title);
$('.item-desc', this).text(currentItem.desc);
$('.item-label', this).text(currentItem.label);
$('.add-note-action-item', this).click(function () {
alert('dummy message');
});
});
$(document).on('pageinit', '#list-page', function() {
$('.item', this).on('click', function() {
currentItem = {
title : $('.item-title', this).text(),
desc : $('.item-desc', this).text(),
label : $('.item-label', this).text()
};
app.navi.pushPage('detail.html');
});
});
})();maps.js
ons.ready(function maps() {
var directionsService = new google.maps.DirectionsService(),
directionsDisplay = new google.maps.DirectionsRenderer(),
createMap = function (start) {
var travel = {
origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
destination : "Alexanderplatz, Berlin",
travelMode : google.maps.DirectionsTravelMode.DRIVING
// Exchanging DRIVING to WALKING above can prove quite amusing :-)
},
mapOptions = {
zoom: 10,
// Default view: downtown Stockholm
center : new google.maps.LatLng(59.3325215, 18.0643818),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("map-directions"));
directionsService.route(travel, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
};
// Check for geolocation support
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
// Success!
createMap({
coords : true,
lat : position.coords.latitude,
lng : position.coords.longitude
});
},
function () {
// Gelocation fallback: Defaults to Stockholm, Sweden
createMap({
coords : false,
address : "Sveavägen, Stockholm"
});
}
);
}
else {
// No geolocation fallback: Defaults to Lisbon, Portugal
createMap({
coords : false,
address : "Lisbon, Portugal"
});
}
});style.css
#map {
height: 100%;
width: 100%;
}
#map-directions {
float: right;
width: 38%;
padding-left: 2%;
display:none;
}
.item {
padding: 10px;
line-height: 1;
}
.item-thum {
background-color: #ccc;
width: 50px;
height: 50px;
border-radius: 4px;
}
.item-title {
font-size: 15px;
font-weight: 500;
}
.item-desc {
font-size: 14px;
color: #666;
line-height: 1.3;
margin: 4px 0 0 0;
padding: 0 30px 0 0;
}
.item-label {
font-size: 12px;
color: #999;
float: right;
}You are loading the map on ons.ready, but I think your details.html page is not even attached to the DOM in that moment. It is just a template waiting to be pushed (and attached) to the navigator, so document.getElementById("map") on ons.ready won't work as you expect.
You can try to load the map on pageinit instead or any other moment when you know the page is attached.