I am running Mac OSX Lion and Xcode 4.1.1. I created a new Phonegap project and in the index.html, I added the following code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js">
</script>
<!-- Tried setting sensor=true, didn't work too -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8" >
function display(position){
var initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var myOptions = {
zoom: 12,
center: initialLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function error()
{
alert('Not working');
}
function init()
{
navigator.geolocation.getCurrentPosition(display,error);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas"></div>
</body>
</html>
The code however, refuses to work. I even enabled the key "EnableLocation" in my Phonegap.plist. I don't get any sort of warning saying "Testapp would like to know your location, Allow?". All I get is this error on the console
navigator.geolocation.setError({ 'code': 1, 'message': 'Location Services Not Enabled' });
Can someone please help me out?
I wish I knew what to tell you, but I hope this helps. I think your code is fine. I just ran it on the iOS 4.3 simulator from Dreamweaver on Snow Leopard and it worked fine. However, I had to make some adjustments because the DIV was completely collapsed. The map was in there, but it was not showing.
Just to prove it to yourself, try adding this to your map_canvas div
style="height: 400px"
When I did that, I could see the map fine.
I am not CSS expert, so I do not know how to make the stupid div expand to the size of the map. Maybe you'll have to do it with CSS. Height 100% didn't work. Sometimes CSS really blows.
Related
I know that I can add OpenStreetMap or Google Maps as basemaps in a web page. However, I am looking for a basemap that enhances the oceans. Is it possible to add an Esri ocean basemap to my html and javascript code? If so, where could I find the code?
EDIT: I have worked up some code. The map doesn't show up when I open it. What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1330px; height: 630px"></div>
<script>
var map = L.map('map').setView([54.296500, -2.209221], 5);
L.esri.basemapLayer('Oceans').addTo(map);
var popup = L.popup();
</script>
</body>
</html>
You would do it very similarly to your (HTML + JS) map that would have used OSM or Google Maps.
The idea is to use Leaflet mapping library, then load the correct tile source (ESRI Oceans in your case).
You can follow the example directly on ESRI-Leaflet plugin: http://esri.github.io/esri-leaflet/examples/showing-a-basemap.html
The list of available ESRI basemaps is there: http://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html
Note that there are Terms of Use for using ESRI basemaps: https://github.com//Esri/esri-leaflet/wiki/FAQ#what-are-the-terms-of-use-for-esri-map-tiles
I have a map that is inside a bootstrap tab-panel, and it's displaying grey which is obviously not desired. However, the second I resize the window, it immediately loads accurately. I am using the same script for the map in another page on the same site, however on that page it's not in a tab pane - and it loads fine. I tried re-ordering the scripts on the page as I thought something may be interfering, but it didn't help. Note I also tried adding the line google.maps.event.trigger(map, 'resize'); as I read another post on here with a similar issue, but it also didn't help.
If I initially click on the tab, I see this:
and If I resize the window I get this:
JS for the map:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(49.246292,-123.116226),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [...]
}
var map = new google.maps.Map(mapCanvas, mapOptions)
google.maps.event.trigger(map, 'resize');
}
google.maps.event.addDomListener(window, 'load', initialize);
The scripts are loaded into the head of the html like this:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" href="images/glyphcon.png" sizes="96x96"/>
<title><?php echo "" . $name . "" ?></title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/general.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/map.js"></script>
And the tab-panel with the map div is like this:
<div role="tabpanel" class="tab-pane fade" id="address">
<div id="map"></div>
</div>
Can anyone tell me why this is happening?
If the tab is not visible during map initialization/loading this is the normal behavior, you should invoke resize during tab click operation or better call the (re) initialize function when you click the tab.
I'm having trouble figuring out how to use the gmaps plugin. I've followed the example given and even looked at the page source and copied it, yet I still have no progress.
This is my chunk of html with js files included.
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new GMaps({
div: '#map', lat: -12, lng: -77
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm getting these errors:
Uncaught Google Maps API is required. Please register the following JavaScript library
http://maps.google.com/maps/api/js?sensor=true. maps.js:22
Uncaught ReferenceError: GMaps is not defined
Not sure why this issue is appearing since I've included the file. Any ideas are much appreciated!
If this helps, I'm using node.js and express on localhost.
That's a dependency error. Include http://maps.google.com/maps/api/js before your call to /javascript/gmaps.js
The error is in the registration url of google maps api. Please use https instead of http.
Include this url:
https://maps.google.com/maps/api/js?sensor=true
I'm not sure, who was using the wrong documentation your or I, but this seems to be working quite fine:
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 15,
center: new google.maps.LatLng(-12, -77)
}
);
});
</script>
</head>
<body>
<div id="map" style="height: 20em;"></div>
</body>
</html>
edit: I just realized you were trying to use gmaps.js - but in that case you're missing the gmaps.js file unless that is what your maps.js was for.
You can download the current version at: https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js
i have a little (maybe) stupid problem. I want to put a Leaflet map on a page, so i downloaded the .css file and the .js file, load it and nothing happens, it just put a gray div with + and - controls but no map, can someone help me?, thanks for your help.
my code is this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<style type="text/css">
#map { height: 180px; }
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var map = L.map('map').setView([51.505, -0.09], 13);
</script>
</html>
And this is the console output:
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi) leaflet.js:6
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi)
Please double check you are setting everything correctly. Check out this getting started page. Looks like maybe you aren't referencing your tiles?
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
I have this page that uses Google Maps Javascript API (extPage.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var cord = new google.maps.LatLng(28.545078,-81.377196);
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>
</html>
That page loads fine as is but I am trying to load into a div on another page. I am doing it like this (test.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#LoadBut").click(function() {
$("#extDiv").load('extPage.php');
});
});
</script>
</head>
<body>
<input type="button" id="LoadBut" value="Load">
<div id="extDiv"></div>
</body>
</html>
When I run it just like this I get an error ReferenceError: google is not defined. I've tried moving the <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> to the test.php page. The error message goes away but the map does not load.
I've never been to sure about the best way to handle Javascript on a page inside of a div like this.
Any help with this would be great.
Thanks!
From what I understand of your requirements, you can use the
Google Static Maps API, whcih does not require any JavaScript.
You just place an img tag with a reference to a static map url into your page with the appropriate parameters. For your example:
<div id="extDiv">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=28.545078,-81.377196&zoom=15&size=600x500&maptype=roadmap&sensor=false" />
</div>
See the note at the top of the documentation to see if the inclusion of API keys are applicable to your project.