Develop Reference

Css-Zoomed Google Maps Wrong InfoWindow Position

Google Maps doesn't support 19 or 20+ zoom in the area where I want to use it. I'm trying it to do with css.
I'm creating the map, adding wheel event to recognize which zoom-level user in. If it's equal to 20, I'm adding css zoom property to the map. However, this time infowindow creating in wrong positions on my click.
map = new google.maps.Map(document.getElementById("map"), {
center: { lng: 1.393307, lat: 52.824281 },
fullscreenControl: false,
type: "HYBRID",
minZoom: 8,
maxZoom: 0,
zoom: 5,
gestureHandling: 'greedy',
mapTypeId: 'hybrid',
streetViewControl: false,
controlSize: 27,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.HYBRID, "Map"],
},
});
Wheel Event and the class' css
.zoom {
zoom: 2;
}
window.addEventListener('wheel', function (event) {
if (event.deltaY < 0) {
if (map.getZoom() == 20) {
$('#map > div').eq(0).addClass("zoom");
}
}
else if (event.deltaY > 0) {
if (map.getZoom() <= 20) {
$('#map > div').eq(0).removeClass("zoom");
}
}
});
Google Maps Click Event
google.maps.event.addListener(map, "click", (function (mapsMouseEvent) {
var position = mapsMouseEvent.latLng;
infowindow.setPosition(position);
infowindow.setContent("test");
infowindow.open(map);
}));
Jsfiddle live test is here; https://jsfiddle.net/mylayf/ubeaL9s2/13

By doing this:
.zoom {
zoom: 2;
}
You are changing the size of container. But zoom in map is done by loading a new layer data. By multiplying the size of container, the pictures will be bigger (along with buttons and etc.) but it's not loading a new layer. So the front window and container will have a shift. For example if you use a zoom of 2, the front window will be 1/4 of zoomed background image and if you click in middle, it will be exactly at the bottom right of background image.
So just change the maxZoom: 0 to something like maxZoom: 30. It will load the maximum resolution images (equal to maxZoom: 18). If it's not enough for your, there are no more resolution by this map and you need to switch to another map provider with more layers for zoom.

How can I disable map repeater in the World Google Map API

I am using world map via Google Map API and World map is going to repeat. I want to disable the same. I am using this code
<div id="map" style="width:100%;height:700px"></div>
<script>
var lat = 0;
var lang = 0;
var centerLatLng = new google.maps.LatLng(lat, lang);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: centerLatLng,
scrollwheel: false,
zoom: 3,
minZoom: 1
});
</script>

If you don't want any repeats, you need to control the minimum zoom allowed and the width of your map to be less than or equal to one width of of the base tiles at the minimum zoom level allowed on your map. Check out this answer!

latLng returns null - Google maps javascript API

Ok so here is the file. It was working some days ago. I haven't really changed anything so i do not know why latLng does not work now.
here is my code
function map_initialize() {
var googleMapOptions = {
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
maxZoom: 18,
minZoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
console.log(map);
//Right Click to Drop a New Marker
google.maps.event.addListener(map, 'rightclick', function(event) {
//Drop a new Marker with location Form
create_marker(event.latLng, 'New Marker', true, true, true);
});
when i console.log(event.latLng); it returns an empty object.

console.log(event.latLng.lat());
tried with mousedown listener , it works

Leaflet map "center" option not working

I have a map and I want to center it to concrete point. Following implementation is working correctly:
var map = L.map('map', {
crs: crs
}
);
map.setView([58.66, 25.05], 2);
However, implementation below is not working correctly and does not center the map. Why it is happening? I get just blank grey area instead of my map. According to the documentation it does completely the same as the code above.
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05)
}
);
map.setZoom(2);
Why?

I think if you specify the center option when creating the map you also have to specify the zoom option or leaflet doesn't know what tiles to request.
var map = L.map('map', {
center: L.latLng(58.66, 25.05),
zoom: 2
});
When you use setView, you are setting center and zoom so leaflet knows the tiles to request.

Have you tried
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05),
zoom: 2
});
?

highlight all routes (google maps) within a specific circle radius

I am using Google Maps Javascript API v3,
What i would like to do is to highlight all routes within a specific circle radius when choosing a point in the map (point coordinates and circle radius are input parameters).
I tried to use the Directions Services and i did manage to display all possible routes when origin and destination points and travelMode are specified and the provideRouteAlternatives option is set to true.
When setting the origin point to be the cirle center, is there way to set multiple destinations points (points on the circle perimeter), and then loop over availables routes and highlight them using Directions Service?
P.S.: i am not trying to draw a circle around a point but to highlight all roads within the circle radius.
Thanks.

This is a just-for-fun answer.
Not really an answer because it really feels like a dirty little hack, and also I am not sure to understand what exactly you are trying to highlight (is it all streets or the results of a Directions request — this is unclear from your question).
But basically, I added 2 maps. The first one is the base map and the other one is positioned on top of the first one, with a border radius, and styles applied.
I then synchronize both maps so that they both move relatively (when panning / zooming).
var myLatlng = new google.maps.LatLng(51.51, -0.12);
var styles = [{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff3380"
}]
}];
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var roundedMapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
styles: styles
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var roundedMap = new google.maps.Map(document.getElementById("map-rounded"), roundedMapOptions);
google.maps.event.addListener(map, 'drag', function () {
roundedMap.setCenter(map.getCenter());
});
google.maps.event.addListener(roundedMap, 'drag', function () {
map.setCenter(roundedMap.getCenter());
});
google.maps.event.addListener(map, 'idle', function () {
roundedMap.setCenter(map.getCenter());
});
google.maps.event.addListener(map, 'zoom_changed', function () {
roundedMap.setZoom(map.getZoom());
});
Note on the use of the idle event listener:
If you are dragging the map very quickly, sometimes the sync is kind of lost. So with the idle event listener, the maps are re-synced after a drag.
Note that I added the below CSS rule to hide the copyright on the rounded map:
#map-rounded .gm-style-cc {
display: none;
}
This is clearly against Google Maps TOS but since it is still there on the base map, I would think this is a fair or acceptable misuse of the API :)
JSFiddle demo