Got a Windows PC and want to explore or plan various walks in a given area, maybe around your home or a holiday destination? The easiest free online options are Bing maps and Google maps. Bing maps includes OS maps that show all footpaths and other public rights of way. Chrome does not have an OS option but it does have Street View so you can view the area.

The methods describe here allow you to open the Bing OS map focused on the given area with the required zoom level. When you find a footpath of interest, right click close to a nearby road opens Google Street View at that point so you can see what the country looks like. You can then use Street View to search for a parking spot and pressing any key open Bing OS again maps with that point marked.

Some degree of technical know-how is needed but it isn't very complex. Web hosting is not required, it’s all done with a local webpage and a free Browser extension. Currently, as stated above, the methods are designed for Chrome browser on Windows. They may work on other devices but that is yet to be explored.

1 Create a Bing maps HTML file

Create a free Microsoft account and get a Bing Maps Key. This application is very simple and just a few details are required, see details here:

https://docs.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/creating-a-bing-maps-account

https://docs.microsoft.com/en-us/bingmaps/getting-started/bing-maps-dev-center-help/getting-a-bing-maps-key

Copy this code into a text editor:

<!DOCTYPE html>

<html>

<head>

.body {overflow:hidden;}

#myMap

{

width:100%;

height:100%;

}

</STYLE>

var map;

function GetMap()

{

//***** grid centre - use your center lat/lon and change zoom if required, up to 16

var lat = 50.889812;

var lon = 0.556462;

zoom = 13;

//*****set up a map - replace your credentials

map = new Microsoft.Maps.Map('#myMap',

{

credentials: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

center: new Microsoft.Maps.Location(lat,lon),

mapTypeId: Microsoft.Maps.MapTypeId.ordnanceSurvey,

zoom: zoom

});

Microsoft.Maps.Events.addHandler(map, 'rightclick', showGoogle);

}

function showGoogle(e)

{

var point = new Microsoft.Maps.Point(e.getX(), e.getY());

var loc = e.target.tryPixelToLocation(point);

loc = loc.latitude + "," + loc.longitude;

var z = map.getZoom();

window.open("https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=" + loc + "&heading=0&pitch=0&fov=80","_blank");

}

</script>

</head>

<body>

</body>

</html>

Edit 3 lines as noted with *****. Open Bing maps, right click on the place you want as the map centre, and down the bottom of the popup you will see latitude,longitude values. Click copy and replace the lat and lon values in the code. Change the credentials to the values Microsoft has supplied.

Other actions are optional. You can change the zoom level. Max value for OS map is 16. If you want the map to show a distinctive icon in the browser you can add a 48x48 icon named favicon.ico in the same folder.

Save as bingmap.html. (Or whatever, as long as it’s .html). Done!

Click on your HTML file and a Bing OS map should open in your default browser, centred on your location. Zoom in and right click on, or close to, a road and Google Street View should open at that point in a new tab. Note that if you click somewhere that is not sufficiently close to a road you will get no view but you will still see the navigation panel at bottom left and can click on the road there.

2 Create a Chrome browser extension to open Bing Maps from Street View

Create a new folder. Copy this code and save to folder as manifest.json:

{

"manifest_version": 2,

"author": "Me",

"name": "Streetview",

"version": "0.1",

"description": "Open Streetview location in Bing",

"background":

{

"scripts": ["background.js"]

"browser_action": {

"default_icon": "icon1.png"

"permissions": ["activeTab"]

}

Copy this code and save to folder as background.js:

browser.browserAction.onClicked.addListener(function(tab) {

browser.tabs.executeScript(null, {file: "content.js"});

});

Copy this code and save to folder as content.js:

var url = window.location.href;

var pos1 = url.indexOf("@",0)+1;

var pos2 = url.indexOf(",",pos1)+1;

pos2 = url.indexOf(",",pos2);

var loc = url.substring(pos1, pos2);

var loc1 = loc.replace(",","~");

var loc2 = loc.replace(",","_");

url = "https://www.bing.com/maps?cp=" + loc2 + "&lvl=16&style=s" + "&sp=point." + loc2 + "_Street View Location";

window.open(url,'_blank');

Create a 40x40 image of you choice and save to folder as icon1.png.

Open Chrome browser. Click 3 dots icon top right/More Tools/Extensions. At top right of extensions page turn on developer mode. At left click load unpacked and select your folder. Your icon should appear at top right.

If you are viewing Google Street View, clicking the icon should show Bing OS maps with the point marked.

The only problem with above is that every time you open Chrome you get an annoying popup warning because the extension is not from the Chrome store. If you want to fix that, see next step.

3 Make a Chrome extension without popups

The only easy solution is to use the Chrome store app Tampermonkey. It’s free but well worth a donation IMO. Go to extensions page as above, click extensions var top left, open Chrome Web Store, search for Tampermonkey and download.

Click the Tampermonkey icon, “Create a new Script” and paste following:

// ==UserScript==)

// @name Open Bing

// @namespace http://tampermonkey.net/

// @version 0.1

// @description Open Grid from Streetview

// @author xoggoth

// @match https://www.google.com/maps/*

// @grant none

// ==/UserScript==

//document.oncontextmenu=null;

window.addEventListener("dblclick", showgrid, true);

function showgrid() {

'use strict';

var url = window.location.href;

var pos1 = url.indexOf("@",0)+1;

var pos2 = url.indexOf(",",pos1)+1;

pos2 = url.indexOf(",",pos2);

var loc = url.substring(pos1, pos2);

var loc1 = loc.replace(",","~");

var loc2 = loc.replace("~","_");

url = "https://www.bing.com/maps/?v=2&cp="+loc1+"&lvl=17&dir=0&sty=s&sp=point."+loc2+"_XXX"

window.open(url,'_blank');

return false;

};

File/Save and you should see the script in list with name Open Bing. Enable if required.

Double click in Street View in Chrome now shows Bing maps as before with point marked.