I want to be able to obtain coordinates of the vertices of a polygon bounding a particular area (locality) in Google maps.
For eg. if I enter :
HSR Layout ( a locality in Bangalore, India) in Google maps it shows a polygon bounding the area.
I found out its not possible with Google Maps Api v3, but use of KML layers might help. Can someone please explain this.
If the KML data is available online, then you can access it using google.maps.KmlLayer. Please see an example here (you will probably understand it; it is a very simple example): https://developers.google.com/maps/documentation/javascript/examples/layer-kml.
//make an instance of google.maps.KmlLayer, using the URL with the desired KML data.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
});
//set the KmlLayer to a map
ctaLayer.setMap(map);
Again, the usage of this function is very simple.
Related
I need a Google Map with marked up areas with different colors.
GADM data
The first article I came across was this one:
https://ourcodeworld.com/articles/read/830/how-to-highlight-an-area-city-state-or-country-in-google-maps-with-javascript
It links to this service for getting coordinates:
https://gadm.org/download_country_v3.html
The problem is that there are too many points so it would end up with 3MB for an embedded map.
Google Maps draw
Then I tried Google Maps service to draw a shape. While it works, I could not find any export function to get the longitude and latitude.
https://www.google.com/maps/d/u/0/viewer?mid=1IlydZDXB-tkN8K8pAR57BRFqBOTv3c8z&ll=59.681023024095936%2C18.40997752499993&z=9
Question
How can I draw an area on a map and then get longitude and latitude for the points? On Google Maps, a tool or something else does not matter.
I solved my problem very differently. I simply used an svg file of just the country and highlighted areas there.
I used this site:
https://simplemaps.com/custom/country
I need to make a heat map using react and google maps.but I am not finding in the maps react documentation. Do not heat google map for react? Could someone help me ?. Thank you.
This part of the docs explains how to add a heatmap layer in javascript (which should be relevent for use within react)
https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap
new google.maps.visualization.HeatmapLayer({
data: points, //the 'heat' of the heatmap
map: map //the map instance
});
I know I can add a Google map to an OpenLayers 2 map as an OpenLayers.Layer.Google(.v3) layer and can add the traffic layer to the included map using code like:
var map;
function init() {
map = new OpenLayers.Map('map');
map.addControl(new OpenLayers.Control.LayerSwitcher());
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
map.addLayers([gmap, gphy]);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(gmap.mapObject);
map.setCenter(new OpenLayers.LonLat(-2, 50.9).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 10);
}
However our site uses a set of standard base maps and we would like to be able to display the traffic layer over these. Is this possible?
We would also be interested in being able to display Google weather and the Streetview overlay in a similar fashion.
Our site already uses Spherical Mercator projection so this is not an issue.
From the Google Maps Terms of service:
(h) No Use of Content without a Google Map. You must not use or
display the Content without a corresponding Google map, unless you are
explicitly permitted to do so in the Maps APIs Documentation. In any
event, you must not use or display the Content on or in conjunction
with a non-Google map. For example, you must not use geocodes obtained
through the Service in conjunction with a non-Google map. As another
example, you must not display Street View imagery alongside a
non-Google map, but you may display Street View imagery without a
corresponding Google map because the Maps APIs Documentation
explicitly permits you to do so.
In short, you can't use Google Maps content with a non-Google map, but you can use it without a map, depending on what the API documentation says.
I'm searching for a way to draw a polyline via google maps v3. Once complete be able to edit the polyline and then continue drawing the same polyline.
I've read much about the DrawingManager (introduced in 3.7) and read much of the API of V3 found here:
https://developers.google.com/maps/documentation/javascript/overlays#drawing_tools
Which shows the example of this:
https://google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools
The developers.google example is great and allows the user to draw and complete the polyline by clicking on the last vertex. But once it's complete I cant seem to find out how to continue drawing on the same polyline. Is this possible?
I know that Google Maps API is up to version 10 (Frozen). I've even looked in their Release and Experimental versions but there's no talk of it there.
I would be open to any suggestions.
Issue created with Google: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5213
Hope it gets more "likes"
PolylineOptions in DrawingManagerOptions ignores the path atribute. So what you could do is to draw a new polyline between the end of the las polyline and the begining of the new polyline when it is drawn (on polylinecomplete event).
google.maps.event.addListener(drawingManager, 'polylinecomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.POLYLINE) {
//save last point
//draw a new polyline to join last final point and this first point if this isn't the first polyline
}
});
Hope it helps
I want to create an overlay on top of Google Maps that displays different streets in different colors.
In the Google Maps API it is possible to create markers and polygons that cover certain areas.
Is there a way to somehow mark different streets?
It sounds to me like you are interested in showing some application specific coloring for your Google maps display (rather than traffic maps).
If so , then you should check out custom overlays. You can create your own transparent background overlay tiles (with your colored streets), match them up with the Google maps tiles and then overlay them on the map. You can find a description of this stuff in the Maps API reference - Overlays.
I have actually been interested in trying this out, and this question might be a good excuse. I'll let you know how I go.
Edit: Ok, I tried this and it was pretty straightforward. You just need to grab the tiles images when the google maps page load (for the area you would like to overlay). Make sure you keep track of the origional urls, because these have the x,y coordinates that you will need to write your tile overlay method.
Edit the tiles with your colored roads then upload them to your web server. Add the following code to use your overlay on the regular map:
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,'©2007 Google'));
// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer = new GTileLayer(myCopyright);
// properties of the tile I based my tile on
// v=w2.97&hl=en&x=38598&s=&y=49259&z=17&s=Galil.png
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/times_square.png";
};
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.75740, -73.98590), 17);
map.addOverlay(myTileLayer)
This code overlays my Thing eats NY tile:
at x = 38598 and y = 49259 at zoom level 17.
It is possible to create markers and polygons in the Google Maps API. You need to create GPolygon and/or GPolyline objects
Have a look to these tutorials
And if you want to obtain the coordinate (latitude, longitude) of certain streets, you may have a look to the source code of this page
I am not sure to fully understand your question: do you want to mark some given streets ?
in that case, a quick-and-dirty way could be to get the coordinates of all the addresses of the street and build a GPolygon according to them...
Have you concidered using OpenStreeMaps?
Try digging into the code used to show the traffic overlay on the normal Google Maps site.
Edit: I just looked at the code, and it appears that even Google decided it was easier to implement this by just generating the traffic lines on the server and pulling them down as transparent PNG overlays.
I just found this link, and I think this could interest you. It is a JavaScript package that provides functionality for displaying multiple routes on Google Maps.
Is it what you were looking for ??