0

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);

 }
  • 1
    What 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 May 28 '18 at 11:01
2

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 be numZoomLevels: 22)

  • map.addLayer([osmlayer, google_terrain]); (should be map.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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.