I'm implementing a ground overlay that covers the entire world map. I have 2 issues at the moment.
First the image even if it's proportioned for the entire world map and I have stretched it (I think) properly, still displays somewhat weirdly stretched.
Second I'd like to tile the ground overlay to 'cover more worlds' when zoomed out excessively, but don't know if tiling is possible.
here's my code:
var start = new google.maps.LatLng(0, 0),
sw = new google.maps.LatLng(-84, -178), // South West
ne = new google.maps.LatLng(84, 178), // North East
imageBounds = new google.maps.LatLngBounds(sw, ne),
mapOptions = {
zoom: 3,
center: start,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions),
oldmap = new google.maps.GroundOverlay("images/world.png", imageBounds);
oldmap.setMap(map);
You can see it here:
http://jsfiddle.net/maurizioliberato/A64nb/1/embedded/result/
Thanks in advance
Did you concern about projection when you stitch the images? Google Maps API uses Mercator Projection.
So I recommend you use a stitcher software to make a map image; PTGui, Hugin, etc.
Related
Is it possible to show multiple layers in google maps? For example showing both the transit and traffic layers. I am looking to great a map with multiple layers using rail, bus, car, etc. traffic data to show bottlenecks, hotspots etc.
var map = new google.maps.Map(document.getElementById("map"),
{
zoom: 13,
center: new google.maps.LatLng(53.4760053,-2.2198102),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var transitLayer = new google.maps.TransitLayer();
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map); // can only appear to show one label at once?
You could try making one layer transparent...
I am using KML layers in Google Maps. And when I load a layer into a map, it shows up in every world as far as you keep horizontally scrolling. For layers with content on a quite small area that doesn't pose a problem, as the map will automatically zoom to show only the relevant content from the layer. But for layers that show markers across the whole world, having them repeat again on the next world, it looks like a bunch of gibberish.
Take for example this sample code from Google Maps, but with a layer of Holocene volcanoes instead of their layer provided by default. If you want to see all of them, you see more than all of them, and you have no reference for when you've come to the place where they are repeating the ones you've already looked at.
Example: http://jsfiddle.net/eppptn2x/
Code:
var map;
var elevator;
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0)
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
var markers = [];
var georssLayer = new google.maps.KmlLayer({
url: 'http://www.volcano.si.edu/ge/GVPWorldVolcanoes.kml'
});
georssLayer.setMap(map);
How do I prevent this behavior? How do I make all layer content, and any markers, be limited to only one world?
I hope I understood your question. Try entering a value for minZOom in mapOptions like this:
var myOptions = {
zoom: 2,
minZoom:2,
center: new google.maps.LatLng(10, 0)
};
I know it's too late but may be it would be useful for someone.
To prevent repeating markers you can set optimized option to false
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
optimized: false
});
You can find related topic here.
Not sure if this is possible but I have set my map up with custom styles and marker and I want to ensure the map shows at this level but with London in view. To do so I centred the map at a different location to my marker. I would like the map to zoom to my location if possible instead of the centre.
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
center: new google.maps.LatLng('51.4600368','0.0781994'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
Also if anybody can tell me why my info window is displaying all funky I would appreciate too.
It has been tough to understand your question but if I got you right, you are trying to fit both center of London and your location on the map without setting a center on some position on the map. If that's correct, then you need google.maps.LatLngBounds() to get it done.
var bounds= new google.maps.LatLngBounds();
var London= new google.maps.LatLng(//London values);
var myLatLng = new google.maps.LatLng(//your values);
bounds.extend(London);
bounds.extend(myLatLng);
map.fitBounds(bounds);
Check if this serves your purpose.
I am trying to get started with the Google Maps API, but I'm finding the documentation incredibly confusing. Does anyone know how to find the coordinates for an image for a ground overlay?
I copied the code here (https://developers.google.com/maps/documentation/javascript/overlays#GroundOverlays) and have it working on my website with my image. But when I try to change the coordinates from Newark to my location, the image does not appear at all. I've just been guesstimating the coordinates for the imageBounds and I'm guessing that's what is causing it not to work. Any help would be most appreciated.
This is my code (the LatLng coordinates are copied from the example):
function initialize() {
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.712216,-74.22655),
new google.maps.LatLng(40.773941,-74.12544));
var myOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var oldmap = new google.maps.GroundOverlay(
"http://www.mcography.com/beta/Accessibility_Map.png",
imageBounds);
oldmap.setMap(map);
}
I use the LatLng Marker and LatLng tooltip options of maps.google.com labs (link is in the right bar - bottom). Once I get it close, I simply make small tweaks to my LatLng numbers.
Also it looks like you may be using the wrong corners for your LatLngBounds box. It should be Southwest (bottom left) then Northeast (top right). Using the wrong corners has the effect of not showing an image.
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});