I am using the google maps API in angular 10, and I am finding some inconsistencies with toggling a DROP animation.
The JSFiddle on the official documenation has a demo toggling the bounce animation.
However, my use case is having multiple markers on a map, each time a marker is clicked, it will DROP in (not bounce). I've tried altering the JSFiddle to make this work by adding a second marker to the map and using a toggle for both.
I can't find a lot of documentation on the Marker.animation and Marker.animating properties for the different animations. I suspect that when a marker has the DROP animation, these 2 properties are set to null after the animation has completed.
marker.addListener('click', () => marker.setAnimation(google.maps.Animation.DROP))
The above does not work.
To get the marker to drop again, set the map property to null (removing it from the map), then set the animation again, and add the marker to the map.
marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);
proof of concept fiddle
code snippet:
// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: {
lat: 59.325,
lng: 18.07
},
});
marker = new google.maps.Marker({
map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {
lat: 59.327,
lng: 18.067
},
});
marker.addListener("click", function() {
toggleDrop(map);
});
}
function toggleDrop(map) {
marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Marker Animations</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>
</html>
Related
I have a map, which populates markers based on search. I'm attempting to user the newer google maps feature AdvancedMarkerView so I can fill it with custom HTML - however, as my search updates, I want to flush the old markers and place new ones when it's called for...and I can't for the life of me figure out how to? https://developers.google.com/maps/documentation/javascript/reference/advanced-markers
The following places the custom markers. It works.
const content = document.createElement('div');
content.className = 'marker-title';
content.textContent = item.title;
const marker = new google.maps.marker.AdvancedMarkerView({
map,
position: item.position,
content
});
Normally for markers, as in the old markers, I've removed them with the following code, markers.forEach((marker) => marker.setMap(null)) however this doesn't seem to work for the advanced markers. Since the marker returned when creating the advanced marker points to the element, I also tried doing a marker.remove() thinking the HTML element would be targeted, but no cigar.
I haven't been able to find any concrete examples on the Google API docs, when it comes to advanced markers, and same for others asking the same question.
There is no setMap() or other method to call on the AdvancedMarkerView class to toggle its visibility or remove it from the map.
Although it is not super clear, the documentation says:
To remove a marker from the map, set the markerView.map property to null.
Working example below:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.39094933041195, lng: -122.02503913145092 },
zoom: 14,
mapId: "4504f8b37365c3d0",
});
const draggableMarker = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.39094933041195, lng: -122.02503913145092 },
draggable: true,
title: "This marker is draggable. Click to remove.",
});
draggableMarker.addListener("click", (event) => {
// Remove AdvancedMarkerView from Map
draggableMarker.map = null;
});
map.addListener("click", (event) => {
// Set AdvancedMarkerView position and add to Map
draggableMarker.position = event.latLng;
draggableMarker.map = map;
});
}
window.initMap = initMap;
#map {
height: 160px;
}
p {
font-family: Arial;
font-size: 0.75em;
margin: 2px 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Draggable Advanced Marker</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<p>Click marker to remove it from map. Click on map to reposition / add marker.</p>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>
I have a KMZ file that i load into my google maps application via link using javascript. The file works perfectly in Google Earth. The problem is in my application when i click in one of the many elements (areas): the returned description data is always from only one of the elements, not displaying the actual clicked, correct, element. This is what i've tried:
Check if the click event in the map is correct by placing a marker in the clicked position, it is correct.
Convert the data into KML using Google Earth, place it into my google drive as public, and using a direct download link from google drive in my application. It displayed the data but the error continued.
Created the most basic/blank application using just the layer to make sure anything else in my other application is interfering. Also didn't work.
The file is in this website: https://www.voanaboa.pt/codigo-drone named as "Regulamento RPA_ver_5.0.kmz”
Here's the only file that creates a basic application using the kmz file, i've removed my API key for privacy.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'https://www.voanaboa.pt/Files/downloads/Regulamento-RPA-ver-5.0.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry&callback=initMap"
async defer></script>
Most (but not all) of your placemarks have the same ID "ID_00000"). If I change that to be unique, the polygon's descriptions become unique:
example with unique ids
Per the KML reference, that doesn't have to be unique (it is a "stanard XML ID", but I am guessing the rendering code is assuming it is.
code snippet with updated kmz file:
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var kmlLayer = new google.maps.KmlLayer();
var src = 'http://www.geocodezip.com/geoxml3_test/kmz/Regulamento-RPA-ver-5.0a.kmz';
var kmlLayer = new google.maps.KmlLayer(src, {
//suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>
I found exactly the same question for Java, but I'd like to do that in JS. So, how to add text above a marker on Google Maps in JS?
As stated in my comment, You can use multiple letters for the map marker label.
If you use the label property when instantiating a new google.maps.Marker class, you pass it an object, with one of the properties text.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
label: { color: '#00aaff', fontWeight: 'bold', fontSize: '14px', text: 'Your text here' }
});
Check the fiddle here.
I think what you're looking for isn't included in the standard library. Google do provide this interesting utility library though so you can make your own markers, labels. The one you want is the MarkerWithLable class. From the link:
This class behaves like google.maps.Marker, but it supports the
association of a label with the marker. If the marker is draggable,
so too will be the label. In addition, a marker with a label responds
to all mouse events in the same manner as a regular marker. It also
fires mouse events and "property changed" events just as a regular
marker would.
Looks like it's used in much the same way a the standard Marker class and there appears to be ample examples of it's use kicking around so good luck and I hope that this was helpful :)
I've attached a quick implementation of the infowindow. Be sure to replace my API_KEY with yours as I've only allowed access to the stack snippets url.
This code snippet creates an infowindow. In the example, the infowindow is called instantly after being created to display it's content above the marker.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var infowindow = new google.maps.InfoWindow({
content: 'Welcome to stackoverflow!'
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
infowindow.open(map, marker);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
</script>
</body>
</html>
To only show the infowindow when the marker is clicked, wrap it inside of a listener:
marker.addListener('click', function() {
infowindow.open(map, marker);
});
In Google Maps, I would like to be able to keep the center of the map on a marker on my location when I'm zooming in or out. It's something that Ingress does, it doesn't matter where you double tap (or double click) or where you pinch, the map remains centered on your marker. So it's possible...
The best I came up with for now is :
google.maps.event.addListener(mymap, 'zoom_changed', function() {
mymap.setCenter({lat: myLoc.lat, lng: myLoc.lon});
})
But it's far from perfect, it just re-center the map after the user already zoomed...
Thanks a lot !
[EDIT] absolutely nothing helps in the API ref... Or elsewhere I'm blind and missed it !
Purely using Javascript
First you disable scroll zoom function by default of google map by scrollwheel=false,
Next create custom scroll zoom function by capture mouse event and set zoom level for google map
Check my sample code: Fiddle URL: https://jsfiddle.net/vh3gqop0/17/
var map, i = 12;
function initialize() {
var myLatlng = new google.maps.LatLng(46.769603, 23.589957);
var mapOptions = {
center: myLatlng,
zoom: i,
scrollwheel: false,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Any Title'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$( document ).ready(function() {
$('#map_canvas').on("wheel", function(evt){
// console.log(evt.originalEvent.deltaY);
if(evt.originalEvent.deltaY > 0){
map.setZoom(++i);
}else {
map.setZoom(--i);
}
});
});
#map_canvas{
height:400px;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
I have no idea why you tagged this question as both Javascript and Android. On Android you need to wrap your MapView inside another view and detect Double Tap motion inside onInterceptTouchEvent which you can override if your class can override FrameLayout for example. Then return true to prevent the map from handling this event and you handle it instead.
For full code please see my answer here: https://stackoverflow.com/a/30118649/764897
Unfortunately Google Maps Api does not provide this behaviour.
The following example doesn't require jQuery and supports double-click and mouse scrolling, but you can add more events if you want.
View in Codepen
Disable:
Double-clickin
Scrolling
Panning
Add dblclick and zoom_changed events on the map and a mousewheel event on the canvas.
I have commented the code, hopefully this works for your case. Keep in mind that you need to normalize mousewheel speed for all browsers and devices. Hammer.js is a good library for that.
var map, zoom;
function initialize() {
// The white house!
var myLatLng = new google.maps.LatLng(38.8977, -77.0365);
// Default zoom level
zoom = 17;
// Keep a reference for evens
var $map = document.getElementById("map");
// Disable scrolling + double-click + dragging
map = new google.maps.Map($map, {
zoom: zoom,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
disableDoubleClickZoom: true,
//draggable: false
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
// EVENTS
// Double Click: event zoom by 1
map.addListener('dblclick', function(e) {
zoomHandler(e.latLng, 1);
});
// Zoom changed: update current zoom level
map.addListener('zoom_changed', function(e) {
// Using a timeout because `getZoom()` does not return a promise.
setTimeout(function() {
zoom = map.getZoom();
}, 50);
});
// Dom event: On mousewheel
$map.addEventListener('mousewheel', wheelEvent, true);
}
// Mouse Scrolling event
function wheelEvent(event) {
if (event.deltaY > 1)
zoomHandler(event, -1);
else
zoomHandler(event, 1);
}
// Zoom in/out
function zoomHandler(event, zoomin) {
zoom += zoomin;
map.setZoom(zoom);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 100%;
height: 240px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>
You should try the center_changed event with panTo function.
google.maps.event.addListener(mymap, 'center_changed', function() {
mymap.panTo({lat: myLoc.lat, lng: myLoc.lon});
})
You can see an example about it here and documentation about panTo function here.
Becareful, it should mess up all the draggable thing.
I want to show location in Google map using JavaScript, but when I zoom out, it shows multiple maps! Also, the map is not fixed in the browser window.
How can I fixate it to the window and force it to show just one map?
<!DOCTYPE html>
<html>
<head>
<title>My Location:</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=en'></script>
<script type='text/javascript'>
var map;
function loadMap(lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
//scrollwheel: false,
//disableDoubleClickZoom: true,
minZoom: 1
};
map = new google.maps.Map(document.getElementById('my_location'), myOptions);
map.streetViewControl=true;
//window.onresize = google.maps.event.trigger(map, 'resize');
}
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
</script>
</head>
<body onload='loadMap(46.518465, 6.5,45,7)'>
<div class='fd'>
<div class='cd'>
<div id='my_location' class='shadow' style='width:600px;height:260px;'></div>
</div>
</div>
</body>
</html>
Edit :
I have uploaded my page screen shot here :
one : is when my page is loaded.
two : is when I zoom out and resize the window.
three : is when I move map to scroll it.
as you see, in two I have three map ! and in three map didn't fix to its div!
Edit2:
I upload my code!
Your question is not really clear. Could you please provide further explanation of the issue?
Resizing the map on div change
From API reference:
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize') .
All you have to do is trigger this event when your window resizes e.g. window.onresize
Adding listener
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
Displaying the map div
Put this in the <head> of your document.
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#my_location{ height: 100% }
</style>
From what I can tell, you are concerned that at the highest zoom levels three copies of the map are shown? This is standard to Google Maps and basically all webmaps. If you don't want that, you could investigate making a custom map with Kartograph.
If you are trying to stop zooming, change to the following code:
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
scrollwheel: false,
disableDoubleClickZoom: true,
minZoom: 1
};
Other than that, I'm not sure what you are asking.