OpenLayers? routing map

  • Open text editor (i.e. Gedit, Mousepad)
  • Google key: you don't need a valid key if you're working on localhost
  • Note: these examples are not compatible with the latest stable version of OpenLayers? (version 2.5). If you want to update the code, please look at:  http://trac.openlayers.org/wiki/SphericalMercator

Starting page (00.index.html)

  • Create a basic html:
  • include OpenLayers? and Google maps API javascript files
  • create an empty div to receive the OpenLayers? map
  • create an empty init function. The function will be called on page load (see onload in the body tag) 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <style type="text/css"> 
        #map { 
            width: 800px; 
            height: 512px; 
            border: 1px solid black; 
        } 
    </style> 
    <script src="./OpenLayers-google/lib/OpenLayers.js"></script> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=foobar"></script> 

    <script type="text/javascript"> 
        function init() { } 
    </script> 
  </head> 
  <body onload="init()"> 
    <div id="map"></div> 
  </body> 
</html>