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:

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=""> 
    <style type="text/css"> 
        #map { 
            width: 800px; 
            height: 512px; 
            border: 1px solid black; 
    <script src="./OpenLayers-google/lib/OpenLayers.js"></script> 
    <script src=""></script> 

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