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...
Related
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.
I am using Google maps API for my project.
var elevator;
var myOptions = {
zoom: 3,
center: new google.maps.LatLng(55.50, -129.35),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var address="CA,state"
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+address+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
});
Google Maps CA in maps.google.com
In My App through API
California Boundary is not shown in map which drawn through API. Any help will be useful.
Google Maps API leaves to the user the job of implementing anything outside the basic features.
Google Maps shares a lot of features in common with Google Maps API but it has always had an edge over his little brother.
For this particular case, you could use a google.maps.KmlLayer to display your desired boundaries. For this, you need a publicly available kml file. This means, if you find said kml, storing it in your public dropbox folder would suffice. Also, there's a size limit on kml files, so don't get carried away.
I guess you need more than just California, but here's an example just for CA
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
disableDefaultUI: true,
zoomControl: true,
center: new google.maps.LatLng(38, -111),
mapTypeId: "roadmap"
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://dl.dropboxusercontent.com/u/3133731/kml/california.kml',
map:map,
preserveViewport: true,
suppressInfoWindows: true
});
Here: I made you a jsFiddle.
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.
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});
I'm using the Google Maps JavaScript API V3 to display a map. I love the familiar yellow/brownish ROADMAP I have no use for the labels (street names, city names, etc.)
Is it possible to have those not display?
I noticed the Satellite map has the option. Why not the ROADMAP/
function initialize() {
var Nice = new google.maps.LatLng(43.7, 7.25);
var myOptions = {
zoom: 4,
center: Nice,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
Use styled map types to turn off labels:
http://code.google.com/apis/maps/documentation/javascript/reference.html#StyledMapType
Here's a good builder for building the properties you want:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html