mikedamoiseau/Leaflet with Google, Bing and Openstreet Maps

## Leaflet with Google, Bing and Openstreet Maps
**Create a Bing API key**
https://www.bingmapsportal.com/application/create/1354301

**Download the plugins**
https://github.com/shramov/leaflet-plugins

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet</title>
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
      <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
      <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
      <script src="js/leaflet/layer/tile/google.js"></script>
      <script src="js/leaflet/layer/tile/bing.js"></script>
      <style>
        html, body, #map {
          height: 100%;
          margin: 0px;
          padding: 0px;
        }
      </style>
  </head>
  <body>
    <div style="width:100%; height:100%" id="map"></div>


    <script type='text/javascript'>

      var map = new L.map('map', {center: new L.LatLng(48.110208, 11.527282), zoom: 13});
      var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
      var bingLayer = new L.BingLayer('AhOyyDefYeE8cCO6nOUC0yJjIn9eqrIgEs7jyVJ3nFetHrzOGfS0UfkVpDapLxJ3', {type: 'Road'});
      var googleLayer = new L.Google('ROADMAP');

      map.addLayer(bingLayer);
      map.addControl(new L.Control.Layers({'OSM':osm, "Bing":bingLayer, 'Google':googleLayer}, {}));
      // add a marker in the given location, attach some popup content to it and open the popup
      L.marker([48.110208, 11.527282]).addTo(map)
          .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
          .openPopup();


      // draw the lines
      var pointList = [
        new L.LatLng(48.109893, 11.519256),
        new L.LatLng(48.109793, 11.522303),
        new L.LatLng(48.109864, 11.524642),
        new L.LatLng(48.109979, 11.530135),
        new L.LatLng(48.110495, 11.536701)
      ];
      var firstpolyline = new L.Polyline(pointList, {
        color: 'red',
        weight: 3,
        opacity: 1.0,
        smoothFactor: 1
      });
      firstpolyline.addTo(map);

      var pointList = [
        new L.LatLng(48.110495, 11.536701),
        new L.LatLng(48.110524, 11.537538),
        new L.LatLng(48.110925, 11.541744),
      ];
      var firstpolyline = new L.Polyline(pointList, {
        color: 'blue',
        weight: 3,
        opacity: 1.0,
        smoothFactor: 1
      });
      firstpolyline.addTo(map);

    </script>
  </body>
</html>
```
	Create a Bing API key
	https://www.bingmapsportal.com/application/create/1354301

	Download the plugins
	https://github.com/shramov/leaflet-plugins

	```html
	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
	<script src="js/leaflet/layer/tile/google.js"></script>
	<script src="js/leaflet/layer/tile/bing.js"></script>
	<style>
	html, body, #map {
	height: 100%;
	margin: 0px;
	padding: 0px;
	}
	</style>
	</head>
	<body>
	<div style="width:100%; height:100%" id="map"></div>



	<script type='text/javascript'>

	var map = new L.map('map', {center: new L.LatLng(48.110208, 11.527282), zoom: 13});
	var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
	var bingLayer = new L.BingLayer('AhOyyDefYeE8cCO6nOUC0yJjIn9eqrIgEs7jyVJ3nFetHrzOGfS0UfkVpDapLxJ3', {type: 'Road'});
	var googleLayer = new L.Google('ROADMAP');

	map.addLayer(bingLayer);
	map.addControl(new L.Control.Layers({'OSM':osm, "Bing":bingLayer, 'Google':googleLayer}, {}));
	// add a marker in the given location, attach some popup content to it and open the popup
	L.marker([48.110208, 11.527282]).addTo(map)
	.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
	.openPopup();


	// draw the lines
	var pointList = [
	new L.LatLng(48.109893, 11.519256),
	new L.LatLng(48.109793, 11.522303),
	new L.LatLng(48.109864, 11.524642),
	new L.LatLng(48.109979, 11.530135),
	new L.LatLng(48.110495, 11.536701)
	];
	var firstpolyline = new L.Polyline(pointList, {
	color: 'red',
	weight: 3,
	opacity: 1.0,
	smoothFactor: 1
	});
	firstpolyline.addTo(map);

	var pointList = [
	new L.LatLng(48.110495, 11.536701),
	new L.LatLng(48.110524, 11.537538),
	new L.LatLng(48.110925, 11.541744),
	];
	var firstpolyline = new L.Polyline(pointList, {
	color: 'blue',
	weight: 3,
	opacity: 1.0,
	smoothFactor: 1
	});
	firstpolyline.addTo(map);

	</script>
	</body>
	</html>
	```