I am trying to add Google street view functionality to a Openlayers Map. I have started by using 3 divs to hold the Openlayers Map (which uses a local tilecached base map), a google api map and another for street view.

If I try to transform the lonlat from EPSG:27700 to EPSG:4326 so that they can be passed to the google map object as the center location, the coordinates are not transformed.

I have the following scripts included in the html:

    <script src="script/openlayers/proj4js-compressed.js"></script>
    <script src="script/openlayers/OpenLayers.js"></script>
    <script src="script/openlayers/defs/EPSG27700.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
   <script src="script/map.js"></script>

If I alert the lonlat variable after transforming it I get the original EPSG 27700 value of lon = 311711, lat = 530372, rather than the converted EPSG 4326 value.

The Openlayers map is set up here:

    //private variables
    var map = null;
    var streetview = null;
    var osgrid = new OpenLayers.Projection("EPSG:27700");
    var googlegrid = new OpenLayers.Projection("GOOGLE");
    var mapextent = new OpenLayers.Bounds(295000.0,505000.0,340000,565000.0);

    var options = {
         projection: osgrid, 
    displayProjection: osgrid,
    maxExtent: mapextent,
    restrictedExtent: mapextent,
    units: 'm'
    var osoptions = {
    scales: [

    //allow testing of specific renderers via "?renderer=Canvas", etc
    var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
    renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

    //Set mapping this object for use in internal functions
    var that = this;

    var addControls = function() {
           var nav = new OpenLayers.Control.Navigation();   
           var zoomBox = new OpenLayers.Control.ZoomBox();
           var layerSwitch = new OpenLayers.Control.LayerSwitcher();
           map.addControls([nav, zoomBox, layerSwitch]);

    //Public Objects
    this.tmsurl = ["http://servername1/tilecache/",

    this.popup = null;

    this.init = function() {

        map = new OpenLayers.Map("map_canvas", options);

        var osmap = new OpenLayers.Layer.TileCache(
            "OS Map",
                 options: osoptions,
                format: 'image/jpeg',
                isBaseLayer: true


         map.addLayers([aerialmap, osmap]);

        var lon = 311711;
        var lat = 530372;
        var zoom = 0;


        that.centreMap(lon, lat, zoom);

The Google Map and Street view is set up here

var lonlat = new OpenLayers.LonLat(lon, lat);
lonlat.transform(osgrid,new OpenLayers.Projection("EPSG:4326"));
        var location = new google.maps.LatLng(lonlat.lat, lonlat.lon);
        var mapOptions = {
          center: location,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        var gmap = new google.maps.Map(
            document.getElementById('gmap'), mapOptions);
        var panoramaOptions = {
          position: location,
          pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
        var panorama = new  google.maps.StreetViewPanorama(document.getElementById('streetview'),panoramaOptions);


1 Answer 1


i dont know how do you define your proj4js defination in EPSG27700.js but you have to define it in openlayers as following:

Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717
                   +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs";

then you can transform it by this way:

var ll = new OpenLayers.LonLat(lonlat.lon, lonlat.lat).transform(
         new OpenLayers.Projection("EPSG:27700"), new OpenLayers.Projection("EPSG:4326"));

i hope it helps you...

  • I had the same defintion in an external js file. I have put it in the openlayers file to see if this makes a different, but still not transforming. Jan 16, 2013 at 14:30
  • However by changing my transform to the way you have done it, it is now working. I thought the transform changed the original point. Jan 16, 2013 at 14:38
  • Proj4js is not defined. Mar 8, 2017 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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