Loading Google maps in jquery mobile, html5 div

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

Loading Google maps in jquery mobile, html5 div

Recommended Posts

lennert102

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity