I am trying to add custom zoom buttons to a Microsoft Map that I am instantiating in a constructor function.
function Planner(options, $mapPanel) {
this.settings = $.extend(true, {}, options);
this.$panel = $mapPanel;
this.map = new Microsoft.Maps.Map($panel, this.settings.map);
}
The default map settings include a default zoom level, center location, and disabling the logo and dashboard.
Instantiation of the map works well. It loads correctly and zoom on scroll and panning are functioning as expected.
var planner = new Planner(options, $mapPanel);
The problem is that planner.map.setView() is not working correctly. When I call planner.map.setView({ zoom: 8 }) nothing happens, but if I change the center of my map to a different location zoom via setView starts working again. For example, this works:
planner.map.setView({ center: someCompletelyNewLoc });
planner.map.setView({ center: myOldLoc });
planner.map.setView({ zoom: newZoomLevel });
I can't figure out what is going wrong here. Any ideas?
P.s. This is my first post, so let me know if this code/explanation is too brief/simple.
Related
I'm initializing a map using leaflet(openstreetmaps) in angular and setting a center that the user sees when opening the site. How can i change the center so the map rotates to the new coordinates on click of e.g. a button? Setting a new center doesn't appear to do anything, neither do i want to reload the site itself. Thanks!
private initMap(): void {
this.map = L.map('map', {
center: [48.1841234, 11.5877796],
zoom: 16
});}
you can use map.flyTo([latlng]) or map.panTo([latlng])
https://leafletjs.com/reference-1.6.0.html#map-panto
I want to center my map at these coords here (google maps website)
I copy pasted the coordinates in my website code:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Because my map slides down from the top of the page when user hovers over some text I call the function to refresh the map at the end of the animation:
$('#map').mouseover(function() {
if ($(this).offset().top == mapHiddenHeight) {
$(this).animate({
top: 0
}, 500, function() {
google.maps.event.trigger(map,'resize'); // refresh map
});
}
})
But the map is slightly offset from the center on my website. (Map drops down when you hover over "Find us on the map", top right)
NB: Actually I just noticed, if I clear the browser cache and load the website it appears at the right location. It's when you reload the page with cache full that it constantly displays with the same location offset. No matter how many times you refresh the page after that. So it only displays at correct location with a cleared cached, which of course is annoying.
I don't even know where to start debugging this. Tested on Chrome and Firefox,
Basically there is nothing to "debug", it may sound funny but when there is something that may be called "bug" it's the position you get when it works as expected.
When you trigger the resize-event the API re-calculates the size of the map to be able to load missing tiles. The API will not re-center the map based on the current center/size(the center of a hidden map usually is the location in the northwest-corner).
You must re-center the map on your own.
there are 2 options:
always center the map at the same position:
store the desired center as a map-option:
var map_options = {
center: new google.maps.LatLng(56.4611388, -2.9719832),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//default-center, should have same value as center
originalCenter:new google.maps.LatLng(56.4611388, -2.9719832)
}
in the $.animate-callback first trigger the resize-event and then set the center of the map:
google.maps.event.trigger(map,'resize');
map.setCenter(map.get('originalCenter'));
center the map at the center before resizing(when a user drags the map this position will be restored):
inside the $.animate-callback:
var center=map.get('center');
google.maps.event.trigger(map,'resize');
map.setCenter(center);
Our code starts with live function and whole page content is created by js live function,below code used for creating google maps within javascript code, for the first creation everything is fine (map seems correctly on screen) but after that time when google map is created again at the same page half of the map comes up and half is grey, that is our problem.
JQuery version 1.8.0
Bootstrap version 2.2.2
var idz = 'mapg';
tr.append($('<td>').append($('<div>', {
'id': idz,
'style': 'width: 100%; height: 300px'
})));
var latlng = new google.maps.LatLng(40.988921, 29.021326);
var options = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
rootMap = new google.maps.Map(document.getElementById(idz), options);
I would appreciate any help with this issue, thanks in advance.
I too had the same problem, I solved it by triggering the resize of Google maps.
Here is the below code:
google.maps.event.trigger(rootMap , 'resize'); //For v3
Add this after initializing the Google maps.
You can take a look at this SO Question.
I have a program that takes in a zip code and makes a google map. The div that the map is set tohidden until the map is made. Once the map is made the div is set to display : block. The problem is that the first time the map is generated (and only the first time) it looks like this:
Once I hit the find a store button again it looks like this:
I have already tried to make a initial call to the map method (which I kept hidden until a real call is made) but this does not fix the issue. I don't want to show all my code (there is a lot) but here is how I make the map.
<div id = "map_canvas" style = " height: 300px; width: 300px;"></div>
//Creates a new center location for the google map
var latlng = new google.maps.LatLng(lat, lng);
//The options for the google map
var mapOptions = {
zoom: 7,
maxZoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creates the new map
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Also note that both images below have the correct markers in the correct place.
Any suggestions?
this is a common problem. you need to trigger a map redraw after changing the container. most of the time this is caused by showing/hiding the div.
in v3 it's:
google.maps.event.trigger(map, 'resize')
in v2 it's:
map.checkResize()
It looks like when you initialize the map, it is completely zoomed out, which brings out the single 250x250 tile that google uses.
I would suspect that possibly an error is occurring on your first "Find Store" button click that might prevent the map creation code from being reached and executing properly.
I'm developing a jQTouch-based app for the iPhone and part of it uses the Google Maps API (V3). I want to be able to pass the geolocation coordinates to the map and have it center the location with a marker. What I'm getting now is the map at the proper zoom level but the desired center-point appears in the upper-righthand corner. It's also showing only about a third of the map area (the rest is gray) and it behaves somewhat erratically when you pan or zoom. Here's the code:
var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
BTW: It looks and behaves the same on other platforms/browsers as well.
Thoughts?
Thanks in advance,
Mark
Added
Here's a link that'll show exactly what's happening:
Screen shot of iPhone emulator
I'm guessing you're using AJAX to display the map, or have the map hidden at some point and then display it based on an action?
In this case Google doesn't know the size of the map container and it will draw only part of the map, usually off-centered.
To fix this, resize the map, then re-center on your lat/lng. Something like this:
google.maps.event.trigger(map, 'resize');
// Recenter the map now that it's been redrawn
var reCenter = new google.maps.LatLng(yourLat, yourLng);
map.setCenter(reCenter);
The solution for getting the map renedered correctly is to execute your Maps-Code on pageAnimationEnd-Event of jQTouch.
Example within Page #div:
<div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div>
<script type="text/javascript">
$('#map').bind('pageAnimationEnd', function() {
var mapOptions = {
zoom: 13,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: pos
});
map.setCenter(pos);
}, function() {
console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed');
}
);
} else {
console.log('Device Environment Not Capable of Geolocation - Geolocation failed');
}
});
</script>
Though, i find myself having trouble to make the Map fullscreen-height. Any help in this case is appreciated. Note that im using DataZombies bars extension for fixed footer navigation.
see my answer on Google Maps API 3 & jQTouch
basically, your #map_canvas div is not visible at the time you're constructing the map as the div it's in has been hidden by jqtouch. the api can't deal with this and get's the size wrong.
would be much easier if gmaps v3 allowed setting explicit size in the constructor (as v2 did).
anyway, delay constucting map until 'pageAnimationEnd'.
Make sure you have set the width/height of the canvas absolutely (i.e.)
$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height());
Of course that assumes you have the jqtouch toolbar up and running...
Had the same exact issue loading a map with directions after loading content with AJAX and showing and hiding the map-canvas div.
You have to trigger the resize event, like Brett DeWoody says, but I found that my global variable went out of scope and I had to refer to them, i.e. the google map variable, INSIDE my functions explicitly on the window object. Here's what I have inside my directionsService response:
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
google.maps.event.trigger(window.map, 'resize');
}
Brett DeWoody's solution worked, but as I'm showing the map in modal the only solution for me was to add setTimeout like this:
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
var reCenter = new google.maps.LatLng(lat, lng);
map.setCenter(reCenter);
}, 500);
After adding setTimeout the map renders and centers perfectly.