JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="http://openlayers.org/dev/examples/all-overlays-google.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers All Overlays with Google and OSM</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="http://openlayers.org/dev/examples/all-overlays-google.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var measureControl = new OpenLayers.Control.Measure(
OpenLayers.Handler.Path,
{
immediate: true,
persist: false
}
);
var lastMeasure = 0.0;
function measurementToolActivated() {
lastMeasure = 0.0;
}
function handleFinalMeasurement(event) {
var units = event.units;
var measure = event.measure;
var out = "measure: " + measure.toFixed(3) + " " + units;
if (lastMeasure > 0) {
out += " last segment: " + (measure-lastMeasure).toFixed(3) + " " + units;
}
lastMeasure = 0.0;
$('#Message').html(out);
}
function handlePartialMeasurement(event) {
var units = event.units;
var measure = event.measure;
var out = "measure: " + measure.toFixed(3) + " " + units;
if (lastMeasure > 0) {
out += " last...