Jump to content

Loading Google maps in jquery mobile, html5 div

Recommended Posts


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>



<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>


/* css styes for the maps */

#map {

height: 100%;


html, body {

height: 100%;

margin: 0;

padding: 0;



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


$(document).ready(function () {

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

function onDeviceReady() {


initMap(); //Google map

navigator.geolocation.getCurrentPosition(displayAndWatch, locError);


// user Current Position

function displayAndWatch(position) {




function setCurrentPosition(pos) {

var image = 'img/ic_CurrentLocationmap.png';

currentPositionMarker = new google.maps.Marker({

icon: image,

map: map,

position: new google.maps.LatLng(




title: "Current Location"


map.panTo(new google.maps.LatLng(





function watchCurrentPosition() {

var positionTimer = navigator.geolocation.watchPosition(

function (position) {







function setMarkerPosition(marker, position) {


new google.maps.LatLng(




var center = {

lat: position.coords.latitude,

lng: position.coords.longitude




function locError(error) {

// the current position could not be located






<!-- 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">


<div data-role="navbar">


<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>




<!-- /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">


<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>

<p>Meteorenstraat 4<br>

2024 RK, Haarlem</p>


023 - 525 36 00 </p>

<p>Keuze 1: Spoed <br>

Keuze 2: Herhaalrecepten <br>

Keuze 3: Assistentie</p>


<!-- 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>


var map;

function initMap() {

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

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

zoom: 8




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

async defer></script>


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


<!-- /footer -->

<div data-role="footer">

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


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




Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...