When working with a visualization HeatMap...
If the rendered map shows 20 miles |_____| in the ruler scale, is there a function that will return the value 20?
How to determine what number is being displayed there?
- That is the ScaleControl, and no there isn't any documented way to get its value.geocodezip– geocodezip2018-11-05 18:50:53 +00:00Commented Nov 5, 2018 at 18:50
- 1I am curious why the question was downvoted.Tim– Tim2018-11-06 12:09:45 +00:00Commented Nov 6, 2018 at 12:09
Add a comment |
1 Answer
You could create your own custom scale control. The script takes 3 parameters:
- The minimum width of your scale control
- The maximum width of your scale control
- An array of scale values you want to use
The code is commented so it should be self explanatory. View the snippet in fullscreen or scroll-down and zoom-in/out to see it in action.
var map; var minScaleWidth = 50; // Minimum width of the scale in px var maxScaleWidth = 80; // Maximum width of the scale in px // Scale values in meters and display values var scaleValues = [{ val: 2, dspVal: '2 m' }, { val: 5, dspVal: '5 m' }, { val: 10, dspVal: '10 m' }, { val: 20, dspVal: '20 m' }, { val: 50, dspVal: '50 m' }, { val: 100, dspVal: '100 m' }, { val: 200, dspVal: '200 m' }, { val: 500, dspVal: '500 m' }, { val: 1000, dspVal: '1 km' }, { val: 2000, dspVal: '2 km' }, { val: 5000, dspVal: '5 km' }, { val: 10000, dspVal: '10 km' }, { val: 20000, dspVal: '20 km' }, { val: 50000, dspVal: '50 km' }, { val: 100000, dspVal: '100 km' }, { val: 200000, dspVal: '200 km' }, { val: 500000, dspVal: '500 km' }, { val: 1000000, dspVal: '1000 km' }, { val: 2000000, dspVal: '2000 km' }, { val: 5000000, dspVal: '5000 km' } ]; function initialize() { var myLatLng = new google.maps.LatLng(46.8, 6.19); var mapOptions = { zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); google.maps.event.addListener(map, 'idle', makeScale); } function makeScale() { let zoom = map.getZoom(); // Calculate the width of 1 map pixel in meters // Based on latitude and zoom level // See https://groups.google.com/d/msg/google-maps-js-api-v3/hDRO4oHVSeM/osOYQYXg2oUJ let scale = 156543.03392 * Math.cos(map.getCenter().lat() * Math.PI / 180) / Math.pow(2, zoom); let minScale = Math.floor(scale * minScaleWidth); let maxScale = Math.ceil(scale * maxScaleWidth); // Loop through scale values for (var i = 0; i < scaleValues.length; i++) { if (i !== scaleValues.length - 1) { // Select appropriate scale value if (((minScale <= scaleValues[i].val) && (scaleValues[i].val <= maxScale)) || ((minScale > scaleValues[i].val) && (maxScale) < scaleValues[i + 1].val)) { // Found appropriate scale value // Set scale width and value setScaleValues(scale, scaleValues[i]); // Break for loop break; } } else { // Reached the end of the values array // Found no match so far // Use array last value anyway // Set scale width and value setScaleValues(scale, scaleValues[i]); } } } function setScaleValues(scale, values) { // Calculate real scale width in px let scaleWidth = values.val / scale; // Set scale HTML elements width and display value document.getElementById('scale-bar').style.width = scaleWidth + 'px'; document.getElementById('scale-value').innerHTML = values.dspVal; } window.initialize = initialize;body { font-family: Arial, sans-serif; font-size: 10px; color: #444; } #map-canvas { height: 130px; } #scale { background-color: yellow; padding: 20px; } #scale-value { display: inline-block; margin-right: 1px; } #scale-bar { border-color: #444; border-width: 0 2px 2px 2px; border-style: solid; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 6px; width: 100px; display: inline-block; }<div id="map-canvas"></div> <div id="scale"> <div id="scale-value"> </div> <div id="scale-bar"> </div> </div> <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>