elemoine/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Use OL3 and Google Maps together

This GIST provides an example of a Google Maps map with an OL3 map as control,
to give users a Google base map with OL3 content on top.
Open the corresponding
bl.ock to view the example
in your browser.
Warning!

This integration between Google Maps and OL3 is rough. Do not use it in
production!
Why doesn't OL3 include a Google Maps source?

This question very often comes up on the OL3 mailing list. The short answer is
because Google doesn't allow us to directly access their tiles. See Paul
Spencer's
post
on the OL3 mailing list for a more complete explanation.

  
## countries.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              countries.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" type="text/css">
    <style type="text/css">
    body {
      width: 960px;
      height: 500px;
      position: relative;
    }
    #map {
      width: 100%;
      height: 100%;
    }
    div.fill {
      width: 100%;
      height: 100%;
    }
    </style>
    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
    <title>Google Maps integration example</title>
  </head>
  <body>
    <div id="map" class="map">
      <div id="gmap" class="fill"></div>
      <div id="olmap" class="fill"></div>
    </div>
    <script src="http://openlayers.org/en/master/build/ol.js" type="text/javascript"></script>
    <script type="text/javascript">
    var gmap = new google.maps.Map(document.getElementById('gmap'), {
      disableDefaultUI: true,
      keyboardShortcuts: false,
      draggable: false,
      disableDoubleClickZoom: true,
      scrollwheel: false,
      streetViewControl: false
    });

    var view = new ol.View({
      // make sure the view doesn't go beyond the 22 zoom levels of Google Maps
      maxZoom: 21
    });
    view.on('change:center', function() {
      var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
      gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
    });
    view.on('change:resolution', function() {
      gmap.setZoom(view.getZoom());
    });

    var vector = new ol.layer.Vector({
      source: new ol.source.GeoJSON({
        url: 'countries.json',
        projection: 'EPSG:3857'
      }),
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',
          width: 1
        })
      })
    });

    var olMapDiv = document.getElementById('olmap');
    var map = new ol.Map({
      layers: [vector],
      interactions: ol.interaction.defaults({
        altShiftDragRotate: false,
        dragPan: false,
        rotate: false
      }).extend([new ol.interaction.DragPan({kinetic: null})]),
      target: olMapDiv,
      view: view
    });
    view.setCenter([0, 0]);
    view.setZoom(1);

    olMapDiv.parentNode.removeChild(olMapDiv);
    gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
    </script>
  </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" type="text/css">
	<style type="text/css">
	body {
	width: 960px;
	height: 500px;
	position: relative;
	}
	#map {
	width: 100%;
	height: 100%;
	}
	div.fill {
	width: 100%;
	height: 100%;
	}
	</style>
	<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
	<title>Google Maps integration example</title>
	</head>
	<body>
	<div id="map" class="map">
	<div id="gmap" class="fill"></div>
	<div id="olmap" class="fill"></div>
	</div>
	<script src="http://openlayers.org/en/master/build/ol.js" type="text/javascript"></script>
	<script type="text/javascript">
	var gmap = new google.maps.Map(document.getElementById('gmap'), {
	disableDefaultUI: true,
	keyboardShortcuts: false,
	draggable: false,
	disableDoubleClickZoom: true,
	scrollwheel: false,
	streetViewControl: false
	});

	var view = new ol.View({
	// make sure the view doesn't go beyond the 22 zoom levels of Google Maps
	maxZoom: 21
	});
	view.on('change:center', function() {
	var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
	gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
	});
	view.on('change:resolution', function() {
	gmap.setZoom(view.getZoom());
	});

	var vector = new ol.layer.Vector({
	source: new ol.source.GeoJSON({
	url: 'countries.json',
	projection: 'EPSG:3857'
	}),
	style: new ol.style.Style({
	fill: new ol.style.Fill({
	color: 'rgba(255, 255, 255, 0.6)'
	}),
	stroke: new ol.style.Stroke({
	color: '#319FD3',
	width: 1
	})
	})
	});

	var olMapDiv = document.getElementById('olmap');
	var map = new ol.Map({
	layers: [vector],
	interactions: ol.interaction.defaults({
	altShiftDragRotate: false,
	dragPan: false,
	rotate: false
	}).extend([new ol.interaction.DragPan({kinetic: null})]),
	target: olMapDiv,
	view: view
	});
	view.setCenter([0, 0]);
	view.setZoom(1);

	olMapDiv.parentNode.removeChild(olMapDiv);
	gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
	</script>
	</body>
	</html>