I'm new to using google maps and am trying to find out how to restrict the zoom function so that it does not zoom anywhere except of the center of the map and not zoom to the mouse point. Basically it zooms to the center of the returned map no matter where your mouse pointer is on the map as opposed to zooming where the mouse pointer is located on the map. I don't even know if this is possible currently, some help would be appreciated.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.285583, 1.091045);
var myOptions = {
zoom: 15,
center: latlng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.285826, 1.089973),
map: map,
title: 'Run of The Mill',
clickable: true
});
}
</script>
There are several zoom types:
using zoom control - that zooms to the center of the map
using scroll wheel - that zooms to the mouse pointer as you complain
using double click - that first centers the place under the mouse pointer and then zooms
So if you want only the first zoom type, you can disable the other two by setting disableDoubleClickZoom and scrollwheel map options to false.
Moreover, you might handle dblclick map event (scroll wheel event is not so straightforward, but maybe you'll find a way how to handle the scroll wheel in javascript too) and in this handler just change the map scale using map.setZoom(). The map center will stay the same. Fairly easy.
Or handle this by re-centering the map on zoom change. This preserves the expected functionality on double click and scroll wheel.
google.maps.event.addListener(map,'zoom_changed',function () {
map.setCenter(new google.maps.LatLng(47.61388802057299,-122.31870898147581));
})
From what I can see in your code you are zooming on the latlng variable that you declared above. That is correct. You myOptions variable is then passed into your new maps declaration. So you should be centered on 51.285583, 1.091045, which is Caterbury Kent in the UK.
If that is where your mouse is pointing it is working, if this doesn't help I would suggest copying an example from the google examples and cutting out what you don't need for your first demo.
http://code.google.com/apis/maps/documentation/javascript/examples/index.html
Related
I'm new in the Google Maps API, I am trying to embed a marker with the address on google maps but I have errors.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map
I'm using this documentation and I have copied this code but it doesn't work properly because when you scroll the marker it's not fixed in the map but its move and doesn't stay in the correct place.
Also, the buttons in the left corner MAP and SATELLITE doesn't appear properly, they appear with a background line in the whole map and don't together smaller.
Finally, the + and - button doesn't appear.
Someone could tell me why I have all this problem?
Here is my code:
<script>
function initMap() {
var blitz8 = {lat: 45.806510, lng: 10.109520};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: blitz8
});
var marker = new google.maps.Marker({
position: blitz8,
map: map
});
};
</script>
And here the Live Page:
https://sebalaini.github.io/Blitz8/
Hi I resolve that problem by disabled some css option in your base.scss please check and fix that, check my picture uploaded below
I have a google maps with this options :
mapProp = {
center: new google.maps.LatLng(39.92553, 32.86628),
zoom: 6,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
I want to this control :
I want to this control but not showing my map.
Or I want to journey with button on map.
Thank You.
Most likely your are using a version of Google Maps newer than 3.22.
After that version as stated in the release notes, the Pan Control is no longer available. To continue to use it you must request an earlier version.
The Pan control on the map is no longer available. To pan the view,
users click and drag, or swipe, the map. (Note that the Pan control in
Street View remains available.)
At the time of this answer we are at version 3.37and 3.22 is already retired.
I am currently trying to synchronize the movement of two Google Maps on screen when the user drags them.
Currently I am listening to the center_changed event. However that is only called once a drag has been completed, thus the second map only moves after the drag and not during.
My current code looks like this
var mapOptions = {
center: new google.maps.LatLng(52.287373, -1.548609),
zoom: 12,
// streetViewControl: false
disableDefaultUI: true,
// draggable: false,
// disableDoubleClickZoom: false
};
mapOptions["styles"] = dayStyle;
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
backgroundMap = new google.maps.Map(document.getElementById("background-map"),
mapOptions);
google.maps.event.addListener(map, 'center_changed', function() {
// Set backgroundMap to match actual map
backgroundMap.panTo(map.getCenter());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
// Set backgroundMap zoom to be further out than actual map
backgroundMap.setZoom((map.getZoom()-2 >= 1) ? map.getZoom()-2 : 1);
});
But I really want to create the same effect that http://snazzymaps.com/ has. I've already tried using the bindTo method to link the background map to the foreground map. But that also only updates the background map after the drag is complete.
the drag event is the one you want, but use it in conjunction with center_changed, because panning using the keyboard arrows will not fire the drag event.
It appears that my code does work in desktop environments.
However the maps JS API limits it callback rates in mobile environments (I can only assume it's for performance reasons), and thus only calls center_changed once per drag. Unlike the on desktop where it is call far more frequently.
I wrote a script which allows an admin to click on a map (google maps api v3) setting up as many locations as he wants, naming them. That is, clicking on the map shows an information window with a form for naming that location. These locations are saved in a database (LatLng coordinates) and show as markers on the map.
Then, users (admin or not) may choose any of these locations from a select box (by name). Once this is selected, there's an option for showing a map with a marker on the selected location. The marker shows correctly, but I would like the map to be centered in that location. That is, the marker in the center of the screen but, instead, it shows in the extreme upper left corner. Actually, initially, the marker isn't even visible. You have to drag the map up and left a little for it to show.
This is rather strange, as I use the same coordinates for both the marker and the center screen. Here's my code (or the relevant part, at least):
var latlng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.ltn));
var latlng2 = new google.maps.LatLng(parseFloat(location.lat) + 0.025, parseFloat(location.ltn) - 0.05);
var map = new google.maps.Map($('.modal-body', modal)[0], {
'center': latlng,
'zoom': 13,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
});
var marker = new google.maps.Marker({
'position': latlng,
'map': map,
'title': location.name,
});
marker.setMap(map);
Notice how in this sample I don't use the latlng2 value. This is what I tried, but it seems to only work for a given resolution. How can I center the map in those coordinates?
Best regards
Edit:
$(map).focus();
modal.on('shown', function() {
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
});
google.maps.event.trigger(map, 'resize');
});
I'm not sure if this will work... If that window resize is cause than it might help. I don't know how it will interact with other code.
Add event listener for resize event:
...
marker.setMap(map);
google.maps.event.addListener(map, 'resize', function() {
map.setCenter(latlng);
});
I need to place a marker at a fixed pixel location within the map's div. To instantiate a marker, you need a LatLng. I understand that fromDivPixelToLatLng() is the way to convert from pixel co-ordinates to a LatLng, but I can't get it to behave consistently.
I have posted a simple example of my problem at http://www.pinksy.co.uk/newsquare/overlaytest.html. Click on the map to place a marker at 200px/200px. Drag the map around and click again. I was expecting a marker to be placed at 200px/200px every time, but this is not the case.
First I set up the map as usual, in a 600px by 300px div:
var london = new google.maps.LatLng(51.501904,-0.130463);
var mapOptions = {
zoom: 15,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Then I create an overlay:
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
To test fromDivPixelToLatLng(), I create a click event on the map, which attempts to place a marker at pixel location 200px/200px. Regardless of where you drag the map, I was expecting the marker to always be placed at 200px/200px:
google.maps.event.addListener(map, 'click', function(event) {
var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(new google.maps.Point(200,200));
var marker = new google.maps.Marker({
position: pixelLatLng,
map: map
});
});
However, drag the map around, and you will see that the marker is not always placed at 200px/200px. Any ideas?
Thanks!
After experimentation, I have found that fromContainerPixelToLatLng() is what I'm looking for. For the benefit of others, I have posted an example at http://www.pinksy.co.uk/newsquare/overlaytest2.html.
(For the record, I'm still unsure why fromDivPixelToLatLng behaves the way it does, but never mind!)
Check the demo under:
http://jsbin.com/otidih/51 for some more experiments on this.
To get the logging start the console - most things are logged there.
Detailed explanation from this groups post.
A shorter version below:
The ContainerPixel is calculated relative to your map container. If you pan the map, then the ContainerPixel of LatLngs changes.
The ContainerPixel of things that don't move with the map (float) doesn't change.
For example, the ContainerPixel of the mapCenter stays the same if you don't resize the map:
overlay.getProjection().fromLatLngToContainerPixel(map.getCenter())
The DivPixel is calculated relative to a huge Div that holds the entire tilespace for the world at the current zoom level.
overlay.getProjection().fromLatLngToDivPixel(point)
If you do not change the zoom level and move (pan) the map, then the DivPixel of anything that moves with the map will stay the same. For example the DivPixel of a given city on a map will stay the same, even if you move the map. It will only change when you change the zoom level or cross the international dateline.
Please note that the actual reference point used for calculating the DivPixel gets reset
whenever the map zooms, so the same LatLng can have different DivPixel values even when you come back to the same zoom level.
Also to be considered is the Point value returned from
map.getProjection().fromLatLngToPoint()
which is well explained in the API Reference
It translates from the LatLng cylinder to the big point plane which always stays the same (no matter which zoom level). Given LatLngs will always map to the same Point.
The (0,0) point is the (85.0511287798066,-180) LatLng - where to Google Map cuts of (if you want to know why , read about the Mercator projection)