For the google map I am using roadmap tiles. Most of the tiles are normal with green/beige terrain coloring and state/country labeling. However, there are some tiles where the terrain is white and doesn't have any labels. It looks like there are two different tile types being sent. Is there anything I can do to make it consistent?
Here is my init code:
var mapOptions = {
center: new google.maps.LatLng(Lat,Long),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
googlemap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
I have an image I can post, but I am new to stack overflow and someone needs to boost my rep.
Thanks
I am having the same problem. You can look at www.onlinecustommaps.com and see how there are white and green tiles. This just started happening yesterday.
It looks like the problem was at Google. As of this morning the issue is no longer present.
Related
Check out a demo: http://jsfiddle.net/VudEC/3/
It's about using Google's Satellite Layer (in example: zoom=20), birds eye mode enabled and a marker.
var map = new L.Map('map_canvas', {
center: new L.LatLng(39.868841, -4.021938),
zoom: 20
});
var ggl = new L.Google('SATELLITE');
map.addLayer(ggl);
var marker = new L.Marker(new L.LatLng(39.868841, -4.021938));
map.addLayer(marker);
If you drag vertically the map (or use the function map.panBy()) you will see the marker moving up or down (vertically). And it shouldn't.
If the drag or movement is horizontal, no problem.
If I disabled the birds eye (or set a lower zoom), the issue disappear.
At least it happens with polygons too.
Btw, with Google Maps API it doesn't happen: http://jsfiddle.net/ew332/1/
I don't understand why I get this issue.
Thank you very much
It seems it's a bug of the plugin, you can read more here and for now, there is no a fix
I'm trying to overlay a building floor-plan on a google map. However zoom level 21 is too small to show indoor detail. I need zoom 23-26.
I tried settings like:
var mapOptions = {
zoom : 24,
maxZoom: 26,
center : new google.maps.LatLng(52.226071,20.950115),
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
but it does not work. I get the default behavior.
var mapOptions = {
zoom : 22
maxZoom: 26,
minZoom: 22,
center : new google.maps.LatLng(52.226071,20.950115),
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
This, does force more zoom, but i can't get beyond 22.
Surely there has to be some solution for floor-plan overlaying on a map.
Any ideas?
The maxZoom for the built-in mapTypes is predefined(depending on the mapType and the location)
What you can do:
Use a custom mapType (you may define a maxZoom for it that fit's your requirements)
Observe the zoom_changed-event of the map. When to zoom reaches the maxZoom for the particular location(21 in this case) switch from the built-in mapType to your custom mapType(and switch back when the zoom goes below 21).
I got this working (albeit with a few bugs) by using a modified version of https://github.com/tilemapjp/ZoomTMSLayer. Instead of using my own tile map service, I just used the same urls that Google was making network calls to.
Essentially you extend google.maps.ImageMapType and redefined the getTile() and getTileUrl() methods. For any zoom level greater than the max zoom level supported by Google at that location, grab the tile that Google would have returned at the max zoom, then scale it and transform each tile so that they line up.
I put my code on Github for viewing convenience: https://github.com/dallinski/GoogleMapsSuperZoomMapType
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'm trying to display a map by creating a view and inserting it into DOM, and it works fine the first time, but fails on subsequent invocations of the view, displaying a gray empty area.
Here is the JSFiddle of the problem: http://jsfiddle.net/dyuvH/14/
Everything works fine when you click on the 'Click to load map' link, but will fail if you do it again.
I'm loading a map into a view using the following:
onRender: function() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapView = new App.MapView();
var map = new google.maps.Map(mapView.el, mapOptions);
mapView.render();
this.ui.mapContainer.html(mapView.el);
}
Again, everything works perfectly the first time and fails the second. I'm thinking the view is holding on to some aspect of the map or vice-versa. I do create new instances of the map and the view using the "new" keyboard in both cases, so I'm not sure what's messed up.
Any help is appreciated.
The call to mapView.render() is not necessary, and can be removed or commented out. That will at least get the map to render upon subsequent clicks.
You will also need to compensate for Issue 1448 in the GMaps API v3. Something along this code should work to solve the off-centered map on subsequent renderings:
google.maps.event.addListener(map, "idle", function(){
map.setCenter(mapOptions.center);
google.maps.event.trigger(map, 'resize');
});
For reference, the updated jsFiddle with the above suggestions.
I had the same problem and after reading #19 of Issue1448 I decided to use onShow instead of onRender and then it worked like a charm. This way I didn't need to trigger any map resize event or trying to work out the center of the map.
Google Maps API V3 doesn't support the V2 GOverviewMapControl option, yet. I've come across a piece of code at http://dl.google.com/io/2009/pres/Th_1045_Maps_API_Mobile.pdf , silde 19, that gives the code to display the smaller map, but not the draggable, semi-transparent blue box that you generally see here. It's possible, but unofrtunately the code is 'ellided'. Anyone have any ideas how to generate this? Thanks
This is how it works out of the box in Maps v3:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
overviewMapControl: true,
overviewMapControlOptions: {opened: true}
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Please note the last two properties of the mapOptions object. They do the trick.
Within the overlayMap, add a draggable marker to display the frame of the RectangleOverlay, and a non-draggable marker to display the semi-transparent box itself. Then, add bindings to some of the maps' events to update size and position of the markers, i.e. the maps' bounds_changed, drag, and/or center_changed events. Finally, update the location of the maps when the frame is dragged by binding a function to its dragend event.
I am using v3 right now and the overviewMapControl seems to work. Can't find any documentation on it yet.
overviewMapControl: true
Then you see a small arrow in the right hand side of your map. Click will open it. Can't figure out how to trigger this click with javascript (jquery) doesn't seem to work.
Check out http://code.google.com/p/gmaps-api-v3-overviewmapcontrol It's an open-source project to approximate the functionality of v2's GOverviewMapControl.