I am using Intel XDK to try and get the google maps displayed on the screen at the location set in Intel XDK. However, I am having issues with actually displaying the map on the screen, after spending many hours researching trying to figure out why it isn't working I have hit a brick wall and I have no idea how to proceed from here.
So any help will be greatly appreciated to point me in the right direction, thanks in advance.
Index.html class
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
100% ; } #viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
#-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } #viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<!-- <script src="lib/mc/hammer.js"></script> -->
<!-- <script src="lib/ft/fastclick.js"></script> -->
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap"></script>
<script src="js/app.js"></script>
<script src="js/Maps.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
</head>
<body id="afui" class="v2" onload="navigator.geolocation.getCurrentPosition(onSuccess, onError)">
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
<div class="upage vertical-col left" id="mainpage" data-role="page"><a class="widget uib_w_2 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="maps" href="#Maps" data-transition="fade">Maps</a>
<a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gps">GPS</a>
</div>
<div class="upage" id="Maps" data-role="page" >
<div class="upage-outer" >
<div class="upage-content ac0 content-area vertical-col left" id="page_70_37"><a class="widget uib_w_4 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button">Button</a>
<div id="map" style="height: 500px; width: 300px; margin: 0; padding: 0;">
</div>
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_6" data-uib="jquery_mobile/footer" data-ver="0">
<h1>footer</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
<div class="outer-element uib_w_5 uib_crossbar botbar fixed bar-bg thumb-bg bar-gutter" data-uib="layout/bottom_crossbar" data-ver="1" data-anim="{'style':'overlap', 'v':400, 'side':'bottom', 'dur':500}">
<div class="sidebar-content content-area vertical-col">
</div>
</div>
</div>
</body>
</html>
App.js
var latitude;
var longitude;
var onSuccess = function(position) {
alert(
latitude = position.coords.latitude;
longitude = position.coords.longitude;
};
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
var locationOptions = {
maximumAge: 10000,
timeout: 6000,
enableHighAccuracy: true
};
Maps.js
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 16,
center: new google.maps.LatLng(latitude,longitude)//{latitude, longitude}
});
//var marker = new google.maps.marker({position: LatLng, map:map});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
/* // stops the text directions when un commented
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
*/
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = new google.maps.LatLng(latitude,longitude)//{latitude, longitude};
var end = '10 Downing Street, Downing Street, London';
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
Index_User_Scripts
/*jshint browser:true */
/*global $ */(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Button */
$(document).on("click", ".uib_w_1", function(evt)
{
/* your code goes here */
});
/* button #maps */
$(document).on("click", "#maps", function(evt)
{
/*global activate_page */
activate_page("#Maps");
initMap();
//calculateAndDisplayRoute();
});
/* button #gps */
$(document).on("click", "#gps", function(evt)
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
You need to have permission to use Google API. I used the Google Maps widget and tried with two locations, Statue of Liberty and Taj Mahal. I was able to make it work in emulator as well as on the Intel XDK Preview apps on my phones. Details are in this post:
http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html
Here are the settings I used for the widget:
Related
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
I created a simple app for Android. I have an error: "script error : $jq('#map'). panTo is not a function"
I tried so many changes but the error remains. where am I wrong?
Thanks in advance.
The code is:
<script>
//Called after application is started.
function OnStart()
{
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
var map = L.map('map').setView([0, 0], 2).addLayer(osm);
marker= L.marker(map.getCenter()).addTo(map)//.bindPopup("<b>Actual Position</b>").openPopup();
loc = app.CreateLocator( "GPS,Network" );
loc.SetOnChange( loc_OnChange );
loc.SetRate( 0.2 ); //10 seconds.
loc.Start();
sns = app.CreateSensor( "Accelerometer" );
sns.SetOnChange( sns_OnChange );
sns.Start();
}
//Called when we get a change in location.
var $jq = jQuery.noConflict();
function loc_OnChange( data )
{
$jq('#field_GPS').text( data.provider);
$jq('#field_GPS').append("<br>Lat "+data.latitude+", Lng "+data.longitude
+", Alt "+data.altitude);
$jq('#field_GPS').append("<br>Spd "+data.speed+", Bear "+data.bearing
+", Accu "+data.accuracy);
marker.setLatLng([data.latitude, data.longitude ]).update();
$jq('#map').panTo(marker.getLatLng, 8, {animation: true});
// map.panTo([50, 30]);
//$('#map').fitBounds(marker.getBounds());
}
function sns_OnChange( x, y, z, time )
{
$jq('#field_ACC').text( "x="+x + "\n y="+y + "\n z="+z );
}
</script>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src='file:///android_asset/app.js'></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.js'></script>
<script type='text/javascript' src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
//<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
//<script src="/vendor/leaflet/addons/leaflet.markercluster.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.hash.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.makimarkers.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.listmarkers.min.js"></script>
//<link rel="stylesheet" href="/vendor/leaflet/addons/css/leaflet.markercluster.css" />
</head>
<style>
body { background-color: #ffffff; }
.hello
{
font-size: 42;
width: 100%;
margin-top: 2em;
text-align: center;
color: blue;
}
#map {
width: 100%;
height: 400px;
}
</style>
<body onload="app.Start()">
<div data-role="page">
<div data-role="header">
<h1 style="text-align:center;">Traking Sensor</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<div id="field_GPS">GPS GOES HERE</div>
<div id="field_ACC" style="color:#0000FF">ACCELEROMETER GOES HERE</div>
<div id='map'></div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4 style="text-align:center;">Ing. Marco Salvatori</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
panTo is a method on Leaflet map instances, but you are using it as a jQuery method - $jq('#map').panTo. You should just be using map.panTo.
Please see http://leafletjs.com/reference-1.0.3.html#map-panto for full documentation on this and other Leaflet methods.
I have three states in my simple ionic project. I want to add a map to home page after logged in. When I tried to add a map in map.html file which is a template file, it appears when map.html opened via browser. However, when I try to reach this state(map.html) by using $stateProvider the map does not appear.
My map.html file is :
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 400px;
}
</style>
</head>
<body ng-controller="mapctrl">
<ion-header-bar class="bar-dark"> <h1 class="title">Home Page</h1></ion-header-bar>
<ion-view>
<div id="map" ng-init="initMap()"></div>
<button ng-click="goOther()" class="button button-block button-dark">For more detail please click!</button>
</ion-view>
</body>
</html>
My app.js is :
var app =angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller:'loginctrl'
})
.state('map',{
url:'/map',
templateUrl:'templates/map.html',
controller:'mapctrl'
})
.state('other',{
url:'/other',
templateUrl:'templates/other.html',
controller:'otherctrl'
})
$urlRouterProvider.otherwise('/login');
}])
app.controller('loginctrl',function($scope,$state){
$scope.goMap = function(){$state.go('map');};
})
app.controller('mapctrl',function($scope,$state){
$scope.goOther = function(){
$state.go('other');};
$scope.initMap = function () {
console.log("deneme");
var myLatlng = new google.maps.LatLng(51.5120, -0.12);
var mapOptions = {
zoom: 14,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
};
})
app.controller('otherctrl',function($scope,$state){
$scope.goLogin = function(){$state.go('login');};
});
I've also tried to add the map directly in map.html file but it doesn't appear,either.
Thanks in advance.
Google maps works only with https in chrome and it may not have any dependency with $stateProvider
Javascript rookie warning
I'm utilizing this demo on a new project: http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
All is working well, except i need to make a functionality adjustment.
Currently, the app accesses Geolocation right away as the page loads.
I need to find a way to change that, so the geolocation function triggers when clicking a link that I'll have say "Use my current location"
I've tried quite a few times, but I admit my rookie javascript syntax is problem.
I'll paste a clean local-ready version of the map (just need to link modernizer).
If anyone can help me trigger the geolocation function via a link, instead of automatically on pageload, you'd be a lifesaver.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link type="text/css" rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/jquery-mobile-1.0/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/mobile.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="../js/modernizr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '40.74843,-73.98566', 'zoom': 18 };
////////////////////////////////////////////////////////////
$('#directions_map').live('pageinit', function() {
demo.add('directions_map', function() {
$('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
self.set('getCurrentPosition', function() {
self.refresh();
self.getCurrentPosition( function(position, status) {
if ( status === 'OK' ) {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
self.get('map').panTo(latlng);
self.search({ 'location': latlng }, function(results, status) {
if ( status === 'OK' ) {
$('#from').val(results[0].formatted_address);
}
});
} else {
alert('Unable to get current position');
}
});
});
$('#submit').click(function() {
self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
( status === 'OK' ) ? $('#results').show() : $('#results').hide();
});
return false;
});
}});
}).load('directions_map');
});
$('#directions_map').live('pageshow', function() {
demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
});
</script>
</head>
<body>
<div id="directions_map" data-role="page"><div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas_1" style="height:300px;"></div>
<p>
<label for="from">From</label>
<input id="from" class="ui-bar-c" type="text" value="" />
</p>
<p>
<label for="to">To</label>
<input id="to" class="ui-bar-c" type="text" value="350 5th Ave, New York, NY 10118" />
</p>
<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
</div>
<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Results</div>
<div id="directions"></div>
<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>
</div>
</div></div>
</body>
</html>
I am working with the jQuery mobile google maps example here, focusing on the first "Basic Map Example".
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html
I want to be able to dynamically add markers to the basic_map, but I am having some trouble. I'm new to jQuery mobile and JavaScript.
Here is my edited version of the basic-map example from the jQuery mobile UI website. If you save it in the jQuery mobile demos folder, then everything should render properly. I have added a button at the bottom of the map page and also the addMarkers function. When you load the page, the map shows up centered at the mobileDemo coordinates (-41, 87), which is close to chicago, but not quite there. When you click on the button, I want to update the map with another marker at the chicago point, but the screen goes blank.
This is just a mock example of what I really want to do. In my longer, more complicated program, I'm querying a database to find addresses that match the query, then I want to put those markers up on the map dynamically. What do I need to change about this source code to be able to plot the Chicago point (or other markers on the fly)?
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" />
<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var map
function addMarkers(){
map = new google.maps.Map(document.getElementById('map_canvas'));
var marker = new google.maps.Marker({
map: map,
position: chicago
});
}
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
</script>
</head>
<body>
<div id="basic_map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
<div data-role="content">
Add Some More Markers
</div>
</div>
</body>
</html>
Please check the below example.
In the first map load there isn't any marker. When you click the button then a marker is dynamically added without a need for page or map refresh.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var chicago = new google.maps.LatLng(41.850033,-87.6500523),
mobileDemo = { 'center': '41,-87', 'zoom': 7 };
function initialize() {
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
$('#map_canvas').gmap('addMarker', { 'position': chicago } );
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
Add Some More Markers
</div>
</div>
</body>
</html>
The initial map:
The map after the button's click: