When you drag a marker, the GMSMapView slightly slides down.
How to disable this animation?
Looks like in javascript it can be disabled:
Removing the Google Maps V3 Marker drag animation?
You can define if the marker can be dragged when you create the marker in your js file. For example:
myMarker = new google.maps.Marker({
position : new google.maps.LatLng(myLat, myLng),
map : map,
draggable : false
});
Same thing for the animation:
myMarker = new google.maps.Marker({
position : new google.maps.LatLng(myLat, myLng),
map : map,
draggable : false,
animation : none
});
Related
A Google map is displayed on the screen and the map style is updated with a dark theme when the map is created (onMapCreated)
The issue is a white blink when the style is changed and it is very visible due to the black theme transition. (Cf. video)
return GoogleMap(
myLocationButtonEnabled: false,
zoomGesturesEnabled: false,
scrollGesturesEnabled: true,
mapType: MapType.normal,
circles: circles,
markers: markers,
initialCameraPosition: cameraPosition,
onMapCreated: (GoogleMapController controller) {
_mapController = controller;
final currentMapStyle = (_themeType == ThemeType.dark)
? _darkMapStyle
: _normalMapStyle;
_mapController.setMapStyle(currentMapStyle);
},
);
}),
As a workaround, I placed the map in a stack.
This stack is filled with the map and a container.
The container is set to transparent after a small period (100ms).
geolocation picture
I want to show data bubble chart on google map.
like the picture above.
how should I approach this problem with geo-location?
I would suggest using the google api and adding makers based on lat & long to show the "bubbles" by setting the image icon. Depending on your requirements you could create an array of markers and show/hide them on the map.
// retrieve div for map
var mapCanvas = document.getElementById("map");
// setup map options - look at google api docs for more info
var mapOptions = {
center: new google.maps.LatLng(50, -50),
zoom: 4
};
// initialize map
var map = new google.maps.Map(mapCanvas, mapOptions);
// create marker
var marker = new google.maps.Marker({
position: { lat: locations[i].Latitude, lng: locations[i].Longitude },
icon: { url: yourBubbleImage() }
});
//to show
marker.setMap(map);
//to hide
marker.setMap(null);
You also might need to register with google to use the gmaps api
"Marker clustering" is the search term you are looking for.
Google provides a JavaScript library on GitHub named MarkerClusterer.
Basically you need to include the JavaScript:
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
and use the MarkerClusterer object:
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
If you need more information have a look at the tutorial or the examples.
I am using OpenLayers 3.5.0 to embed a map in my website, and place a marker overlay at specific coordinates. I've also added a fullscreen control. Both work individually, but in full-screen mode the marker is no longer at the specified coordinates. It also moves around when panning instead of staying fixed to one map position.
Here's the code that sets up the map:
function map(lon, lat) {
var coords = ol.proj.fromLonLat([lon, lat], 'EPSG:3857');
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
]),
layers: [ layer ],
target: 'map',
view: new ol.View({
maxZoom: 19,
zoom: 15,
center: coords
}),
interactions: ol.interaction.defaults({mouseWheelZoom:false})
});
map.addOverlay(new ol.Overlay({
position: coords,
positioning: 'bottom-center',
element: $('<img>')
.addClass('location-popover')
.attr('src', 'pin.jpg')
}));
}
Is there a way I can make the overlay play nicely in full-screen mode?
I had a similar issue with the popovers/markers being in the wrong position. Not sure if it's the same thing you're experiencing but in my case I was appending data to the page along with the markers, and this was adding a scrollbar to the window. This affected the positioning, so what I had to do was call
map.updateSize();
after I was done adding everything. After that everything lined up correctly.
I was playing with https://github.com/apneadiving/Google-Maps-for-Rails and
i'd like to clear all the marker on a map and add a new one at the position clicked by the user on the map, I added the following code in my page
<script type="text/javascript" charset="utf-8">
function gmaps4rails_callback() {
google.maps.event.addListener(Gmaps4Rails.map, 'click', function(object){
alert(object.latLng);
});
</script>
And in this way i can see an alert with the lat and long value, now how can i delete the old markers and create a new marker and place it on the map?
If you want to clear markers created by gmaps4rails, use this js function:
Gmaps4Rails.clear_markers();
otherwise, loop through your markers and make marker.setMap(null)
Well, the following function removes all markers and add a new one where user clicks:
var marker = null;
function gmaps4rails_callback() {
Gmaps4Rails.clear_markers();
if (marker != null) { marker.setMap(null); }
google.maps.event.addListener(Gmaps4Rails.map, 'click', function(object){ marker = new google.maps.Marker({position: object.latLng, map: Gmaps4Rails.map});});
}
Notes:
You could use whatever logic you desire in the js code to create only one marker or send it's coordinates through ajax.
latitude can be retrieved with: object.latLng.lat(), longitude with: object.latLng.lng()
Another way to add markers is to use the add_marker function described here: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Dynamic-%28or-Ajax%29-map-refresh
Has anyone been able to get map marker clicks working on iPad? I have tried the following, which worked nicely on Google Chrome, but not on the iPad.
// Marker
var marker = new google.maps.Marker({
position: location,
title: 'Title',
map: map,
icon: '/images/marker.gif'
});
// Click listener
google.maps.event.addListener(marker, 'click', function() {
...
});
The problem was that I was listening on "click" events when I should have been listening on "mousedown" events.