I am using the setRotation method for an ol.View similar to the examples available at the openlayers examples page. I have an encoded polyline that is drawn on the map and then we fit to the extent of that layer and if necessary rotate the map.
This all works great with OpenStreetMap and even a custom imagery service. This will not work with any of the Google tile services though. Is there any support for rotation of the ol.View with Google map services, if so, any examples? I didn't see any comments in the API documentation for ol.View and Google map services.
Thanks for any input.
You can use rotate control only for 45° imagery see code like this:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.518970, -122.672899),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 90,
tilt: 45
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function rotate90() {
var heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery
if (map.getTilt() != 0) {
window.setInterval(rotate90, 3000);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see an example google45°
But for normal google maps the rotation is not avaliable.
Related
I have to put a Map from Google (Google Maps or GoogleMyMaps) in a website. I need the map to show a lot of different places all over my country (about 200 places). I already have a GoogleMyMaps with all the places.
But I need the map to have a zoom limitation/restriction : I want people NOT TO KNOW exactly where the places are, which means the zoom must stop before it gets accurate enough.
I know you can control the zoom with GoogleMaps JS API with something like
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
But I dont know how to add places on a Google Maps (still I have them all on a GoogleMyMaps).
Thank you for your time
Thank you everyone for your help.
So most of the time, GoogleMyMaps uses .KML files (as import or export), and it is possible to upload the data from a .KML file into Google Maps.
Here is an example :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 1, lng: 1}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'THE_KML_FILE_URL',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
async defer></script>
But note that the KML file has to be online, it does not work on local (Google's API needs to have access to your file).
Then you can customize your Google Map using Google Map Javascript API (https://developers.google.com/maps/documentation/javascript/tutorial).
Thank you everyone for your time
There are a lot of questions on SO asking a way to show region boundaries in google maps. The answers say it is not possible unless we specify the boundaries manually as polygon coordinates.
If that is the case then how are these websites showing the regions:
commonfloor.com
zenify.in
Now commonfloor has an area id (in its url) which means that it may have the boundaries in a database somewhere and is using it to draw the polygons. So may be they are not getting the data from google. But, zenify is doing something different. It's website loads these pngs from google which actually form those bounadries - eg. this - it is the top left part of the boundary of the entered location. We can see more of these files being loaded in the network tab of chrome development tools. How exactly is this kind of boundary mapping achieved without figuring out a way to get region boundary coordinates?
Also, if it is definitely not possible, and these websites are using some tool to map/get coordinates of Indian regional boundaries, what are those tools?
The boundaries of the areas in both sites are stored, they don't request them from google.
commonfloor.com uses an encoded path to build a Polygon:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(26.4604514, 74.6296585),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
new google.maps.Polygon({map:map,path:google.maps.geometry.encoding.decodePath('eho`D{unfMx#EzAEx#Gv#GpAIlCMhDSfBI`BKf#CAMCe#ASIqAAYA[OcACSCYAS?M#OBa#HsBDa##Q?K?ICo#?M?i#Bi#Bs#?G?i##g#?k#Bk##[Bg#?YCWCKOQe#a#EEIIMM#MFa#FUDKPk#?]?]Ig#AEQgA[?_#AYGe#Ka#Mm#[kAk#g#l#[XYVu#r#QTz#~B?dEJtAGz#Mp#Wp#?p#RjB_Rv#eCWDkFo#ZiAd#uAd#iAZoAZUFw#LWd#Ar#Ff#r#dAf#x#t#d#|#`#fBnAbA~#f#d#LLdAdAbAnAp#z#PXHPHHHH^J^#')});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map_canvas{height:100%;margin:0;padding:0}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
zenify.in uses a KmlLayer:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(26.4498954, 74.6399162),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
new google.maps.KmlLayer({map:map,url:"http://www.zenify.in/kml/59.kml?q=v2"});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map_canvas{height:100%;margin:0;padding:0}
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
First time ever posting on StackOverflow so tell me and be crude if I am doing something terribly wrong anyway. I recently created a KML file with maps.google.com and I uploaded the kml to my site, and I am trying to implement to the google maps that we created, but I am stumped as I have no errors but it does not show at all.
// North Campus SHuttle KML implementation
var redShuttle = new google.maps.KmlLayer (
'http://blazelist.org/maps/test/RedShuttle.kml'
);
redShuttle.setMap(map);
Can you share more code?
In my example your code is working:
function initialize()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(22.7964,73.8456),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
/* var kmlLayer = new google.maps.KmlLayer('http://blazelist.org/maps/test/RedShuttle.kml',
{
suppressInfoWindows: true,
map: map
});
*/
var redShuttle = new google.maps.KmlLayer ( 'http://blazelist.org/maps/test/RedShuttle.kml' ); redShuttle.setMap(map);
}
http://jsfiddle.net/iambnz/WbzpS/
I'm testing an embedded Google Map with a kml or kmz file, and cannot get any transparency. The kml / png shows transparency in Google Earth, but not in Google Maps. The first color byte in the kml file (<color>88ffffff</color>) has no effect on the transparency.
Is there a way to get the transparency in Google Maps as well as Google Earth?
function initialize() {
var mapProp = {
center: new google.maps.LatLng(36.31, -95.37),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var kmzLayer = new google.maps.KmlLayer('http://xpda.com/coverage.kml');
kmzLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
KML-Layers in Google Maps does not support the <color>-element for GroundOverlays.
You may store the PNG with the desired alpha-transparency instead.
Code with V3 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
var ch = new GLatLng (0,0);
var myOptions = {
zoom:7,
center: ch,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer(map, document.getElementById("map"));
directionsDisplay.setMap(map);
}
}
Code with V2 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
map = new GMap2 (document.getElementById("map"));
map.setCenter (new GLatLng(0,0),1 );
}
}
The V2 API code worked flawlessly, the V3 API code is NOt displaying any map.
What's the point that I am missing?
EDIT
Modified the V3 code as follows, but still no maps:
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
Make sure you are loading the correct Google Maps API, that you have a div tag with an id of map, and (for good measure) that you give the div a height and width. (Perhaps better to put the height and width in a stylesheet, but for clarity, I'm including it inline here.)
Here's a web page with your post-edit code. Try it. Works for me.
<html>
<head>
<title>Google Map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="height:500px;width:500px"></div>
<script>
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>
In V3, all the names have changed. For example, GLatLng is now google.maps.LatLng. You will need to revise your code to use the new names.
A link to the docs in case you don't have it
There is no GLatLng in v3, change it to google.maps.LatLng
center: chicago,
I had the same symptoms, my v2 maps would not display with V3. When I look in the browser console logs, I'm seeing the error: Uncaught ReferencedError: GBrowserIsIncompatible is not defined.
Per the Google V2 to V3 Migration Guide, GBrowserIsIncompatible is no longer supported. I haven't found an alternative and just removed the logic related to this function. This site suggests just removing the function.
I found other problems with migrating which are addressed in the Google Migration Guide link above.
1- ensure your google map API key is correct.
2- it's may be not enabled in your google map console.
3- wrongly enabled the location API instead of the map API.