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.
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'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 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.
My index.html has a button(id="my-btn"):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My INDEX PAGE</title>
</head>
<body>
<br><input type="button" id="my-btn" value="OPEN NEW WINDOW"/>
<script src="js/my.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
js/my.js handles button click event, when my-btn button is clicked, a new browser window will be opened with a new page(test.html)
my.js:
$('#my-btn').click(function(){
window.open('test.html', 'testwindow');
});
The new page(test.html) opened in new browser window:
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST</title>
</head>
<body>
<div id="my-name"></div>
<script src="js/test.js"></script>
<script src="js/jquery-1.5.1.js"></script>
</body>
</html>
In the new page, test.js will be invoked and it will append the text "JOHN" as the content of this page
js/test.js
$(document).ready(function(){
$("#my-name").append("<strong>JOHN</strong>");
});
But, when the test.html page opened in a new popped up browser window, I did not see the text "JOHN", it is an empty page, why?
(I have jquery-1.5.1.js under "js/" directory, and all JavaScript files are under js/)
Pretty simple here...
You're calling $(document).ready... before $ is defined.
This happens in the jquery, so you need to switch up your script order:
<script src="js/jquery-1.5.1.js"></script>
<script src="js/test.js"></script>
The content of test.js depends on jQuery, but you don't try to load jQuery until after you have executed everything in test.js.
Switch the script elements around.
I am putting a google map on my web site and I wanted to add points to the map but I am not sure how to do it. I have tried a few different things but they did not work. Here is what I have so far:
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=myKeyHere"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.8163, -98.55762), 4);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 750px; height: 500px"></div>
</body>
</html>
This page should get you going
The Google Maps API shows information on how to do this. Basically do:
var point = new GLatLng(latitude,longitude);
map.addOverlay(new GMarker(point));
I used this plugin (it uses Google Map V3 as V2 is deprecated)
http://blog.bobcravens.com/2010/06/06/AGoogleMapsVersion3JQueryPlugin.aspx
it also requires jquery(which makes things easier). It has methods such as
map.addMarkerByLatLng
or
map.addMarkerByAddress
Hope that helps!