How do I find the current zoom level when loading or clicking a Google map?
If you have a map object like this:
var mapObject = new google.maps.Map(document.getElementById("map"), _mapOptions);
use
mapObject.getZoom();
Use this code:
float zoomlevel = mMap.getCameraPosition().zoom;
If you need to get zoom on change
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
console.log(zoom);
});
I got it using:
console.log(this.map.zoom);
I'm using agm-angular-google-maps
html:
<agm-map (mapReady)="onMapReady($event)">
TS:
onMapReady(map) {
this.map = map;
}
Related
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
});
I have created a map in Meteor using Leaflet JS. The problem is, I could only get map.panTo to work inside the Template.dynamicmap.rendered area. However, this makes it so anywhere you click on the map pans to the location.
This is the complete rendered area with id and access token removed.
Template.dynamicmap.rendered = function() {
var southWest = L.latLng(35.02035919622158, -121.21049926757814);
var northEast = L.latLng(42.4426214924114, -110.79740478515624);
var mybounds = L.latLngBounds(southWest, northEast);
var map = L.map('map_container',{zoomControl: false, maxBounds: [[37.00035919622158, -119.23049926757814],[40.4626214924114, -112.77740478515624]],}).setView([38.685509760012, -115.86181640625001], 10);
var w = window.innerWidth;
var h = window.innerHeight;
$('#map_container').css({width: w+'px', height: h+'px'});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
bounds: mybounds,
maxZoom: 10,
minZoom: 9,
}).addTo(map);
L.Icon.Default.imagePath = 'packages/leaflet/images';
var marker = L.marker([38.685509760012, -115.86181640625001]).addTo(map);
map.fitBounds(bounds);
};
So I tried putting it in an Template event shown below, this button is not within the map area but still in the dynamicmap template. It does not work though.
Template.dynamicmap.events({
'click input.goto3':(function() {
map.panTo(L.latLng(38.685509760012, -115.86181640625001));
})
});
I receive the error:
"Uncaught ReferenceError: map is not defined"
in the console. Which I have been trying to wrap my head around but no luck. I was hoping someone here could point me in the right direction.
Here is my HTML Template.
<template name="dynamicmap">
<div class="containerbox">
<div class="map_container" id="map_container">
</div>
</div>
<input type="button" class="goto3" value="Go"/>
</template>
You need to make map a global variable:
var map = null;
Template.dynamicmap.rendered = function() {
var southWest = L.latLng(35.02035919622158, -121.21049926757814);
var northEast = L.latLng(42.4426214924114, -110.79740478515624);
var mybounds = L.latLngBounds(southWest, northEast);
map = L.map('map_container',{zoomControl: false, ...
...
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 );
} );
Here's the basic code, I cut it straight out:
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var markerSize = new google.maps.Size(20,34);
var houseMarker = new google.maps.MarkerImage("marker2.png",markerSize);
var markerShadowSize = new google.maps.Size(30,34);
var markerShadowPoint = new google.maps.Point(30,0);
var markerShadowAnchor = new google.maps.Point(0,35);
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
marker = new google.maps.Marker({
position:loadposition,
title:"<?=$feed['name']?>",
draggable:false,
clickable:true,
icon:houseMarker,
shadow:houseMarkerShadow
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(e){
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var htmlContent = "<?=$feed['name']?><br/><?=$feed['address']?>";
infowindow.setPosition( loadposition );
infowindow.setContent(htmlContent);
infowindow.open(map);
});
For some reason, the shadow does not show. However, If I enable drag and drop and/or set up a marker animation (either bounce or drop) the shadow shows up once it's lifted up.. But as soon as the marker lays down the shadow disappears.
I can not find any other documentation on this nor similar questions / answers.
Thanks
The shadow image needs to be different than the marker image.
For example the marker shadow for google maps is like this;
http://maps.gstatic.com/mapfiles/shadow50.png
From your code;
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
Having the same image marker2.png as both the marker and the shadow probably isn't going to work as you expect.
It turns out that the syntax is correct. It's actually a bug with Google Chrome and Safari. Internet explorer and Firefox all render the shadow correctly.
The bug is opened at http://code.google.com/p/gmaps-api-issues/issues/detail?id=3993