So I noticed in the older version of the API there was a maxZoomLevel under nokia.maps.map.Display. However I can not find anything similar to this in the JS API 3.0.
Currently I am using
map.addEventListener('mapviewchange', function () {
var zoom=map.getZoom();
if(zoom<=maxZoom) {
map.setZoom(maxZoom)
}
});
But once it hits the maxZoom and you zoom out more it is very choppy since it zooms out a bit then I set it back to maxZoom. Is there any better way of doing this?
You can set the max zoom for the layer, something like follow should work
var defaultLayers = platform.createDefaultLayers();
defaultLayers.normal.map.setMax(12);
var map = new H.Map(mapContainer,
defaultLayers.normal.map,{
center: {lat:39.2328, lng:9.01168},
});
Just a small addition on the accepted answer, if anyone is trying to use a vector layer, as provided in the here maps examples, then you just need to select the vector object, as done below:
var defaultLayers = platform.createDefaultLayers();
defaultLayers.vector.normal.map.setMax(19); // this will set the max zoom level, so the user won't able to zoom deeper than 19 (close to buildings level)
var map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,
{
center: currentAddress,
zoom: 18 // this is the default zoom level
});
Related
I was able to set minimum and maximum zoom level for clustered data points in Nokia HERE Maps API 3.0. But, I can't seem to figure out the way to do this for regular markers.
How can I set a minimum and maximum zoom level for markers?
Thank you for any help you can provide.
There is not a mix-max zoom config for a nomal Marker, but it can be easily achieved using Map listener, a simple example is as follows
var minZoom=5;
var maxZoom=13;
marker = new H.map.Marker({ lat:50.16 , lng: 8.63});
map.addObject(marker);
map.addEventListener('mapviewchange', function () {
var zoom=map.getZoom();
if(zoom>=minZoom && zoom<=maxZoom) {
marker.setVisibility(true);
}else{
marker.setVisibility(false);
}
});
I'm trying to apply a Google static map as a background for a div element. Is this possible? I'm using the image-background CSS property at the moment.
You can simply save the image by navigating to the URL of your static map and use it as a background like any other image.
.map-div {
background-image:url('static-map.png');
}
The maximum resolution it can be is 640x640, which may or may not be sufficient, however you can use a scale value of 2 to get a 1280x1280 image.
Yes, this is very possible.
You'll need a Google API key and some knowledge of CSS3.
Read more about how to do it and get some sample code here: http://blog.wadehammes.com/post/3837158298
Use this code to disable all controls:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
I draw a polyline to a google maps, and put markers to every point of it. I want to hide these markers higher zoom levels, therefore I use the Marker Manager. It's works well.
After draw everything, the map zoom to the bound of the polyline with the google.map.fitBound command. But if it zoom to far, where the markers would be hided, they don't. They still visible. If I drag or zoom again, they are hiding.
I use the markermanager in the simple way:
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarkers(aMarkers[0], 15, 0);
markerMgr.addMarkers(aMarkers[1], 12, 0);
markerMgr.addMarkers(aMarkers[2], 10, 0);
markerMgr.refresh();
});
Is anybody met this problem before? Thank is advance!
I had this same problem. When creating your markers, don't set the "map" parameter in the marker options. The MarkerManager will add the markers to your map as you zoom in and out.
For example:
var newMarker = new google.maps.Marker({
//map: map
position: markerPosition,
icon: icon
});
mgr.addMarker( newMarker, 9 );
Why do you have the maximum zoom for the markers set to 0?
MarkerManager.addMarkers(aMarkers[0], minZoom, maxZoom(optional))
Try (that parameter is optional per the documentation):
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarker(aMarkers[0], 15);
markerMgr.addMarker(aMarkers[1], 12);
markerMgr.addMarker(aMarkers[2], 10);
markerMgr.refresh();
});
Working Example
Here is the code I'm using to show markers and infoWindows. It's working perfectly.
mapOptions = {
zoom: zoom,
center: getMyCompanyCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($(this)[0], mapOptions)
infowindow = new google.maps.InfoWindow()
createMarker = (company)->
marker = new google.maps.Marker({
position: new google.maps.LatLng(company.latitude, company.longitude),
map: map
})
google.maps.event.addListener(marker, 'click', ()->
infowindow.setContent('content')
infowindow.open(map,this)
)
return marker
firstCompanyMarker = createMarker(companiesData[0])
createMarker(companiesData[i]) for i in [1..companiesData.length-1] by 1
google.maps.event.trigger(firstCompanyMarker, 'click')
However, there is one issue. The infoWindow of the default (firstCompanyMarker) marker is not showing as I need. It's crossing the top edge of the map.
I tried to move the center but there was no result.
lat += 100 #or lat -=100. Anyway it does NOT work
long += 100 # it does work but it's moving the center
#of the map to the left or the right and it's not what I need
mapOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Your ideas? How do I make infoWindow to be shown in the center of the map and to not cross the top edge of it?
Add a the following line after "infowindow.setContent('content')"
map.setCenter(marker.lat-100, marker.lng-100);
However, this is not a real solution. From experience I can tell you that you map is very little for the standard infowindow. You have really 2 options to solve this:
1) Increase the size of the map so the default infowindow will show with the marker in the center of the map or
2) Use a custom infowindow and make it a lot smaller than the default one
Hope that helps!
map.setCenter(marker.lat, marker.lng- (popup.getheight/2));
This should work.
Late answer for the sake of anyone stumbling on this. I had the same problem and noticed that if I closed the infoWindow and clicked the marker, the infoWindow would open and pan to the correct position. Instead of triggering a click, waiting for the tilesloaded event before opening the initial infoWindow was the key.
// Trigger click after tiles are loaded so auto-pan positions infoWindow correctly
google.maps.event.addListenerOnce( map, 'tilesloaded', function () {
infoWindow.open( map, marker );
} );
I have an issue with my MarkerClusterer.
When i was 400 markers, cluster appears, all worked.
But now i have moire than 600 markers and cluster don't appear.
Firebug display this error:
that.map_.mapTypes[that.map_.getMapTypeId()] is undefined markerclusterer.js:304
Have you an idea?
Thanks
Update your markercluster.js to the latest revision:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js
and your problem will be solved!
the best solution is switching to api 3.5 waiting a fix by google.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=true"></script>
It seems that google have changed something in the api.
You can manually set the maxZoom value in your cluster options or in your map options to something like 16, then it works again.
If you have other layers like Bing oder OSM, you have to set their maxZoom values too.
var clusterOptions = { styles: ClusterStyles, maxZoom: 16 };
markerClusterer = new MarkerClusterer(map, markersArray, clusterOptions);
i think that maps api are changed and mapsTypes array don't has the maxZoom property
Yep, woke up to mine broken too.
Comments here worked, I added maxZoom: 18 to my initialization.
footer_map = new google.maps.Map(document.getElementById('footer_map'), {
zoom: 1,
center: new google.maps.LatLng(42, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomOnClick: true,
maxZoom: 18
});
In markerclusterer.js at line 156 change code from
var maxZoom = that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom;
to var maxZoom = 18;
Same error message after "click" on cluster.
Solution:
use concrete version of google maps, not latest (e.g. http://maps.google.com/maps/api/js?v=3.5&sensor=true)
change marker clusterer js - set fixed maxZoom
I fixed it sorta the same way but slightly different.. Best way it to update your code.. this code augments the property back where it is expected.
var that = this;
google.maps.event.addListener(this.map_, 'zoom_changed', function() {
try{
var maxZoom = that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom;
} catch(Error){ maxZoom = that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom = 20; }
var zoom = that.map_.getZoom();
if (zoom < 0 || zoom > maxZoom) return;
if (that.prevZoom_ != zoom) {
that.prevZoom_ = that.map_.getZoom();
that.resetViewport();
}
});