lennert102

July 28, 2019

Hi,

I’m having a problem with the implementation of google maps within my phonegap build. I have this problem in the browser on my pc and on the Phone itself. When I have the code in isolation it works and shows a map but when I have it within the rest of the code nothing seem te happen. Please help me with this.

<!doctype html>

<html>

<head>

<title>Huisartspraktijk app</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">

<script src="js/jquery.js"></script>

<script src="js/jquery.mobile-1.4.5.js"></script>

<script src="js/jquery-1.11.3.min.js"></script>

<script src="js/jquery-ui.js"></script>

<style>

/* css styes for the maps */

#map {

height: 100%;

}

html, body {

height: 100%;

margin: 0;

padding: 0;

}

</style>

<!-- Script for the geolocation, Stack Overflow -->

<script>

$(document).ready(function () {

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

//onDeviceReaddy

initMap(); //Google map

navigator.geolocation.getCurrentPosition(displayAndWatch, locError);

}

// user Current Position

function displayAndWatch(position) {

setCurrentPosition(position);

watchCurrentPosition();

}

function setCurrentPosition(pos) {

var image = 'img/ic_CurrentLocationmap.png';

currentPositionMarker = new google.maps.Marker({

icon: image,

map: map,

position: new google.maps.LatLng(

pos.coords.latitude,

pos.coords.longitude

),

title: "Current Location"

});

map.panTo(new google.maps.LatLng(

pos.coords.latitude,

pos.coords.longitude

));

}

function watchCurrentPosition() {

var positionTimer = navigator.geolocation.watchPosition(

function (position) {

setMarkerPosition(

currentPositionMarker,

position

);

});

}

function setMarkerPosition(marker, position) {

marker.setPosition(

new google.maps.LatLng(

position.coords.latitude,

position.coords.longitude)

);

var center = {

lat: position.coords.latitude,

lng: position.coords.longitude

}

map.setCenter(center);

}

function locError(error) {

// the current position could not be located

}

});

</script>

</head>

<body>

<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->

<div data-role="page" id="mobiel">

<!-- /header -->

<div data-role="header">

<h1>SPOED</h1>

<div data-role="navbar">

<ul>

<li><a href="#main">Mainpage</a></li>

<li><a href="#chat">Chat met de arts</a></li>

<li><a href="#consult">Consultaanvraag</a></li>

<li><a href="#doorverwijzing">Doorverwijzing</a></li>

<li><a href="#bloedonderzoek">Bloedonderzoek</a></li>

<li><a href="#berichten">Berichten</a></li>

<li><a href="#epd">EPD</a></li>

<li><a href="#medicijnen">Mijn medicijnen</a></li>

</ul>

</div>

</div>

<!-- /content -->

<div role="main" class="ui-content" align="center">

<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>

<div style="background-color: lightyellow">

<br>

<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>

<p>Meteorenstraat 4<br>

2024 RK, Haarlem</p>

<p>Telefoon<br>

023 - 525 36 00 </p>

<p>Keuze 1: Spoed <br>

Keuze 2: Herhaalrecepten <br>

Keuze 3: Assistentie</p>

<br>

<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->

<div id="map"></div>

<script>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -34.397, lng: 150.644},

zoom: 8

});

}

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"

async defer></script>

</div>

<a href="#spoedEisend" class="ui-btn ui-shadow ui-corner-all">Terug</a>

</div>

<!-- /footer -->

<div data-role="footer">

<h2>&copy; 2019 Huisartsapp</h2>

</div>

</div><!-- /page -->

</body>

</html>

Sign In

lennert102

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by lennert102

Loading Google maps in jquery mobile, html5 div

Browse

Activity