I have the following piece of code to create a heatmap layer on a Google map:
Please, see https://pastebin.com/MrGVevxj
but it doesn't show any heatmap overlay on the map. However, the following example code works like a charm:
https://pastebin.com/87TDrGAq
Can you tell me what I'm missing here?
I'm answering my own question. The problem was with the size of the points to render the heatmap due to the different scales between the maps. For instance, the following value shows the heatmap:
var markersX13749 = new google.maps.visualization.HeatmapLayer({
data: markersX13749Data,
dissipating: false,
radius: 0.7
});
In the apparently non-working piece of code, I was using the value 0.003 for the radius which is too small.
Related
I want to have a polyline that fades out from the current position (alpha = 1.0) to the start position (alpha = 0.0). In that way, give some kind of visual chronology to such a line.
After some googling, I concluded, that currently a gradient on a polyline is not part of Maps' feature set.
Am I right in this conclusion. I hope not, because I'm about to
Draw a complex polyline as many single lines, each with an increasing opacity. Question: is this going to blow up browsers, when my polyline consists of hundreds of points?
Thanks in advance..
So, here is something that is more than a comment, so I post it as an answer, realizing it might not be THE answer, and I don't expect anyone to honor this as such:
So, rather than drawing a polyline like this:
line = new google.maps.Polyline({
path: path,
map: map
});
I came up with this:
function multiMonolines (path) {
var totalPoints =path.length;
for(var i = 0; i < (path.length-1); ++i){
var startingPoint =path[i];
var endingPoint=path[i+1];
var shortPath=new Array(startingPoint,endingPoint);
line = new google.maps.Polyline({
path: shortPath,
---and here I do some stuff with opacity---
map: map
});
};
};
My finding is, that the map is drawn fast enough. (There are 381 'multimonolines').
However: zooming in on the map in Safari hangs the web page. Chrome is easier on that.
I realize that drawing 380 lines is quite an expensive thing to do, so I think I will have to revert to the polyline, hoping that someone has figured out how to do a gradient polyline. Or until Apple optimizes its js rendering engine even more.
I have a map that I built 4 years ago with API v2. I'm now trying to upgrade it to API v3, but all I get is the infamous blank gray box where the map should be. I have done console.log all over the place and all the data and variables look correct to me, but I am not a Google Maps expert.
Here is the map in it's current broken state:
https://www.idahopower.com/AboutUs/serviceMap/
The map is supposed to show 4 shaded polygons representing my company's service area divided into regions. The points that make up the polygon borders come from a large XML file (1573 lines) on my server, which is here:
https://www.idahopower.com/AboutUs/serviceMap/serviceMap.xml
I am not sure if I am doing this in the best way, but I am using XMLHttpRequest() to load the XML data.
This was all working with API v2. Any help would be appreciated!
This will not initialize the map correctly (center and zoom are required MapOptions):
// Create map object
//
var map = new google.maps.Map(document.getElementById("map"));
from the documentation
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
working example, your code with center and zoom set
There is nothing wrong with your Polygon, you didn't set the required options zoom and center for the map.
Related to the XML: 1500 vertices isn't that much, but when you want to improve the performance you may send the data as JSON(it should reduce the amount of data to the half)
I need to be able to put text within my polyline like the embedded Google Maps does as you can see from the below screenshot...
Now I have looked through the PolylineOptions API Reference and the Polyline but I can't see anything the points to achieving this. I really hope this is possible and I'm not going to have to hack something together.
Here is a Post Worth look at, Describing how to add labels to polylines:
http://duncan99.wordpress.com/2013/02/28/google-maps-api-polylines-and-events/
I commented yesterday asking if there might be any current way to add text within polylines. I know this question has been resolved, but the last activity I can see was in 2014.
I came across this library in github https://github.com/googlemaps/js-map-label
It allows a user to overlay text on the map with (see also examples folder):
var mapLabel = new MapLabel({
text: 'Route name',
position: pointCoordinate,
map: map,
fontSize: 12,
align: 'left',
});
Note, their source code within the "onAdd" method applies the pane to the map level, meaning the text would be underneath polylines. So, instead, I added it to the floatShadow pane by:
panes.floatShadow.appendChild(canvas);
Instead of:
panes.mapPane.appendChild(canvas);
I was able to make my map look like:
Adding text to polylines is not (currently) supported by the Google Maps Javascript API v3. You will need to create your own custom overlays to implement that. (I doubt you can make the text "follow" the polyline along a curve easily)
I've googled, looked through S.O., and even just ran through the javascript properties using firebug, but I just can't find a way to get the maxIntensity property in a google heatmap. I can set maxIntensity, when instantiating the new map.
According to the docs here: https://developers.google.com/maps/documentation/javascript/3.10/reference#HeatmapLayer
there's no method for getting to the heatmap options object either, just setting as well.
Any ideas?
You can get it, assuming heatmap is the heatmap layer:
heatmap.get('maxIntensity')
First, would suggest taking a look at the Google Maps Documentationj. The provided solution seems correct, you can double check with the
heatmap section.
let heatmap = new google.maps.visualization.HeatmapLayer({
data: locations,
map: map,
maxIntensity: maxI,
radius: rad,
opacity: opac
});
How can I search nearest schools for any given post code like shown in following screenshot?
http://i.imgur.com/xjrMp.png
When I go to maps.google.com I don't see this option. Or is it only available through Google Maps API? How can I do this?
The Places API will do something like this. See the example at https://google-developers.appspot.com/maps/documentation/javascript/examples/place-search and alter the code to change "store" to "school" (and the location to something else, if necessary).
The example you quote probably has their own database of schools.
Andrew is exactly right. You'll need to call in places along with your maps.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
Basic setup:
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
// Places request
// ALL TYPES: https://developers.google.com/places/documentation/supported_types
var request = {
location: myLatLng,
radius: 500,
types: ['school']
};
This example will need some modifying when put into use.
I had to do this recently for a project of mine (sorry for the annoying polygon in this example), here is a jsFiddle.