I'm really stumped on why my HTML/Javascript code isn't working. My webpage currently only shows my map div, but no actual map content.
My code so far:
HTML:
<style type="text/css">
#mymap {
width: 650px;
height: 550px;
border: thin dashed;
margin: 0 auto;
}
h2 {
text-align: center;
}
</style>
<body onload="initMap();">
<div id="container">
<br>
<div id="mymap">
</div>
<div id="legend"></div>
</div>
Javascript:
var map;
function initMap() {
//initialise variables
var osmlayer;
var google_terrain;
var point;
//create new map object
map = new OpenLayers.Map("mymap");
//create new API layers
osmlayer = new OpenLayers.Layer.OSM("Open Street Map");
google_terrain = new OpenLayers.Layer.Google("Google Terrain Map", {
type: google.maps.MapTypeId.TERRAIN,
numZoomLevels; 22
});
//add layers to the map
map.addLayer([osmlayer, google_terrain]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// define point as a new LonLat object and transfom
point = new OpenLayers.LonLat(-6.67, 55.15);
point.transform("EPSG:4326", "EPSG:900913");
//center the map and set zoom level
map.setCenter(point,10);
}
-
1What version of openlayers do you use? Syntax looks like and old openLayers 2, which has different syntax than OL3/4. If you use OL2 do you have reason for that? It is no longer supported or in development.Catch– Catch2018年05月28日 11:01:50 +00:00Commented May 28, 2018 at 11:01
1 Answer 1
Below a solution. You will need to replace YOUR_API_KEY with your own Google Maps API key. Now, this key is mandatory. Be careful it costs (see this article)
The issues in our code were
numZoomLevels; 22(should benumZoomLevels: 22)map.addLayer([osmlayer, google_terrain]);(should bemap.addLayers([osmlayer, google_terrain]);)
The full code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<style type="text/css">
#mymap {
width: 650px;
height: 550px;
border: thin dashed;
margin: 0 auto;
}
h2 {
text-align: center;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&key=YOUR_API_KEY"></script>
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function initMap() {
//initialise variables
var osmlayer;
var google_terrain;
var point;
//create new map object
map = new OpenLayers.Map("mymap");
//create new API layers
osmlayer = new OpenLayers.Layer.OSM("Open Street Map");
google_terrain = new OpenLayers.Layer.Google("Google Terrain Map", {
type: google.maps.MapTypeId.TERRAIN,
numZoomLevels: 22
});
//add layers to the map
map.addLayers([osmlayer, google_terrain]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// define point as a new LonLat object and transfom
point = new OpenLayers.LonLat(-6.67, 55.15);
point.transform("EPSG:4326", "EPSG:900913");
//center the map and set zoom level
map.setCenter(point,10);
}
</script>
</head>
<body onload="initMap();">
<div id="container">
<br>
<div id="mymap">
</div>
<div id="legend"></div>
</div>
</body>
</html>
answered May 28, 2018 at 11:11
default