google map in jquery mobile site - javascript

I create a Google map on my jQuery mobile site follow an example,
it has to use onload="initialize()" on the body tag to enable the map work,
now I want to display the map without using onload="initialize()" in the body tag, what should I change on the JS.
site Link: http://www.xuanyinwen.com/jquery/jquerymap/demos/test.html
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="shortcut icon" href="http://computersforpeople.info/websites/images/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-114x114.png"/>
<link rel="icon" type="image/png" href="http://computersforpeople.info/websites/Icons/icon48.png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://computersforpeople.info/websites/scripts/jquery-1.9.1.min.js"></script>
<script src="http://computersforpeople.info/websites/scripts/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
});
</script>
<style type="text/css">
<!--
.style1 {font-size: large}
-->
</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1>test</h1>
<div align="center">
</div>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<div data-role="collapsible-set" style="padding-left: 10px; padding-bottom: 10px;">
<ul data-role="listview" data-filter="false" id="test-more" >
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="6 Westbury Crescent Remuera NZ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(600,400)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div data-role="collapsible" data-collapsed="false">
<h3>Map</h3>
<p>
<div align="center"><font size="2" color="#0000AA" face="Verdana, Arial, Helvetica, Sans-Serif"><b>
<div id="map_canvas" style="width: 300px; height: 200px"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</b></font>
<font size="2" face="Arial, Helvetica, sans-serif">
<br>
<strong>Map location not guaranteed</strong> </font> </div>
</p>
</div>
</div>
</ul> <br />
<li>Contact Geoff Duncan</li>
</ul>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1></h1>
</div>
</body>
</html>

If you don't want to use onload="initialize()" then you have to call initialize() yourself. For example in $(document).ready
$(document).ready(function () {
initialize();
});
There are a few other issues in your code as well. I've fixed them and here is a fiddle with your code fixed a bit. JSFiddle.net

Related

How do I prefill the origin and destination of a mapbox directions api?

I have:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display driving directions</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.3/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.3/mapbox-gl-directions.css' type='text/css' />
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYndhZGFtc29uIiwiYSI6ImNqajZhNm1idDFzMjIza3A2Y3ZmdDV6YWYifQ.9NhptR7a9D0hzWXR51y_9w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-79.4512, 43.6568],
zoom: 13
});
map.addControl(new MapboxDirections({
accessToken: mapboxgl.accessToken
}), 'top-left');
</script>
</body>
</html>
This gives me a nice map with driving directions but I want to prefill the "starting place" and "destination" in the rendered map. How do I do that via javascript so the user doesn't have to enter their information twice?
You need the setOrigin and setDestination methods from the MapboxDirections API:
map.on('load', function() {
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken
});
map.addControl(directions, 'top-left');
directions.setOrigin('Brockton Avenue, Toronto');
directions.setDestination('East York Avenue, Toronto');
});
[ https://jsfiddle.net/me3kj9td/ ]

jQuery Mobile interferes with Google Maps v3 API

I'm building an app within Phonegap and I've got two parts working on their own, but will not work together.
Here is the HTML I'm trying to render:
<body>
<div id="map"></div>
<div data-role="collapsible-set" id="storeList">
<div data-role="collapsible" data-mini="true">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible" data-mini="true">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
</body>
When my header is in this order, the map shows up, but the jQuery mobile collapsing dropdown does not. This is probably stemming from trying to load jQuery Mobile before jQuery itself.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
<title>Working Google Maps</title>
</head>
However, when I flip it around and place jQuery before jQuery mobile, then the collapsible data sets work, but google Maps does not show up. It's just a blank white space.
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
The CSS that matters:
html, body {
width: 100%;
height: 100%;
padding-top: 10%;
}
#map {
width: 100%;
height: 60%;
z-index: 5
}
#storeList {
height: 30%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2
}
The lengthy JavaScript
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
// app.receivedEvent('deviceready');
navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},
onSuccess: function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: latLong,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myLocationMarkerImage = {
url: 'img/blue_dot.png',
anchor: new google.maps.Point(16, 0)
};
var myLocationMarker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location',
icon: myLocationMarkerImage
});
},
onError: function(error){
alert("the code is " + error.code + ". \n" + "message: " + error.message);
},
};
app.initialize();
TIA!
I was able to figure this out by looking at these two articles:
PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?
JQuery Mobile + Google Maps v3
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href='http://fonts.googleapis.com/css?family=Lobster|Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
</head>
<body>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<h1>My App</h1>
</div>
<div role="main" class="ui-content" id="map">
<!-- map loads here... -->
</div>
<div id="storeListLoading"><img src="img/loader.gif"></div>
<dl id="storeList"></dl>
</div>
</body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/async.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.scrollintoview.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=_MY_API_KEY_&libraries=geometry,places"> </script>
</html>
CSS
#map-page {
width: 100%;
height: 100%;
padding: 0;
}
#map {
width: 100%;
height: 45%;
z-index: 10;
position: fixed;
}
JS
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
// app.receivedEvent('deviceready');
navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},
onSuccess: function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: latLong,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myLocationMarkerImage = {
url: 'img/blue_dot.png',
anchor: new google.maps.Point(16, 0)
};
var myLocationMarker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location',
icon: myLocationMarkerImage
});
},
onError: function(error){
alert("the code is " + error.code + ". \n" + "message: " + error.message);
},
};
$( document ).on( "pageshow", "#map-page", function() {
app.initialize();
});

Where do i insert - google.maps.event.trigger(map, 'resize');

After searching through, Lot of people have suggest to use this google.maps.event.trigger(map, 'resize');
solution for hidden div, google map to render properly.As of now, only one third of map display and rest are greyed out.i have try inserting this code in each line to check. nothing work. Can some help me out.. am clueless !!
this is my js
$("#1").on("click",function(){
var map;
mapProp = { center:new google.maps.LatLng(40.73, -74.1841),
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
mapProp = new google.maps.LatLng(40.73, -74.1841)
var marker = new google.maps.Marker({
position: mapProp,
map: map,
icon: 'img/marker.png',
});
marker.setMap(map);
});
google.maps.event.addDomListener(window, 'load');
this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/direction.css"/>
<link rel="stylesheet" type="text/css" href="css/transitions.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="css/transitions.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/apijs?v=3.exp&sensor=false"></script>
</head>
<body>
<div id="Home">
<div id="picture"> <img src="img.jpg" alt="logo"> </img></div>
<label><div id="select">Select</label></div>
<ul id="list"><hr>
<li id="b1" >Mall</li><hr>
<li id="b2" > city</li><hr>
<li id="b3" > office</li><hr>
<li id="b4" >Park</li><hr>
<li id="b5" >school</li><hr>
<li id="b6" > theater</li><hr>
</ul>
</div>
<div id="showmap">
<div class="back" id="Back">Back to Names</div>
<div id="googleMap"> </div>
</div>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
solution
# Andrei Beziazychnyi
UpDate This solve everything
google.maps.event.addListener(map, "idle", function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
After :
marker.setMap(map);
Only problem with is, my locaction is little off. had to bring down to see the marker.
Best option I know is to use following code:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});

jquery mobile refresh to load map api v3

I have to refresh one time the page to load the map.
You can actually have a look in the link below:
http://metartestmobile.netau.net/template/listview.html
When i move this line (
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script> )
But i wanna use that line..
Here's is the file listview.html
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="themes/Bootstrap.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div data-role="page" id="my-page" >
<div data-role="content" data-theme="a">
<ul data-role="listview" data-inset="true" data-divider-theme="f">
<li data-role="list-divider">Weather</li>
<li data-icon="arrow-r"><a href="map.html" data-transition="flip" >Humidity-Rain</a></li>
</ul>
</div>
</div>
</body>
</html>
and the map.html
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="themes/Bootstrap.css">
<script type="text/javascript">
var infowindow;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(38.822590,24.653320);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div data-role="content">
<div id="map_canvas" ></div>
</div>
</body>
</html>
jquery mobile use ajax page load for default.
so change this
a href="map.html" data-transition="flip"
to
a href="map.html" data-transition="flip" rel="external"
then jquery mobile refresh hole page.

Can't display Google map with jqTouch and PhoneGap

I'm fighting with this issue for a long time now and I can't find a proper solution. My goal is to display a Google map in my app. I'm developing my app with jQTouch and PhoneGap framework. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- INCLUDE CORDOVA -->
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<!-- INCLUDE REMOTE DEBUGGING -->
<script src="http://debug.phonegap.com/target/target-script-min.js#photogap"></script>"
<!-- INCLUDE jQTouch -->
<link rel="stylesheet" href="./js/jqtouch-1.0-b4-rc/themes/css/jqtouch.css" id="jqtcss" />
<link rel="stylesheet" href="./css/index.css" />
<script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/lib/zepto.min.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/jqtouch-1.0-b4-rc/src/jqtouch.min.js" charset="utf-8"></script>
<!-- INCLUDE GOOGLE MAP -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByqhQ9cCaXTKjBi2xEyp_HqQJwDl3YzRo&sensor=true">
</script>
<script type="text/javascript">
// Inicializuj jqTouch
$.jQTouch({
icon: 'jqtouch.png',
statusBar: 'black-translucent',
preloadImages: []
});
</script>
</head>
<body>
<div id="home" class="current">
<div class="toolbar">
<h1>Orionids</h1>
</div>
<ul class="rounded">
<li class="arrow">My Spots</li>
<li class="arrow">View On Map</li>
<li class="arrow">Choose From Library</li>
</ul>
<div id="spot_btn">
Spot Now!
</div>
<p id="quote">„Make a wish…“</p>
</div>
<div id="map">
<div class="toolbar">
<h1>Map View</h1>
<a class="back" href="#">Home</a>
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
<script>
// Incializuj Google Mapy
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
$('#map').bind('pageAnimationEnd', function() {
initialize();
});
</script>
</div>
</body>
</html>
The problem is that the map won't display no matter what I'm trying. I tried every hint that I found here on Stack Overflow but no luck so far. Any help would be appreciated.
You need to set the height of the container div in px instead of %
<div id="map_canvas" style="width:100%; height:100px"></div>
Try this and the map will show up. Also make sure the initialize method is being called.

Categories