On small zoom levels one place will be displayed twice or more (world map is repeated horizontally). When I place marker on map with coordinates (e.g. -32.05604, 115.74718) I will see it on map more than once. It's normal.
But if I try to show infowindow on mouse hover I will get wrong behaviour. Infowindow will be always showed near one of my markers and never near other, without relation what marker was under mouse cursor.
See example here: (try to move mouse to left marker on map).
https://jsfiddle.net/m3wpk1gr/1/
How to show infowindow for marker which under mouse?
My code:
function initialize() {
var myLatLng = new google.maps.LatLng(-32.05604, 115.74718),
myOptions = {
zoom: 1,
center: new google.maps.LatLng(-32.05604, 0)
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
var iw = new google.maps.InfoWindow();
marker.addListener('mouseover', function() {
iw.setContent('InfoWindow');
iw.open(map, this);
});
marker.addListener('mouseout', function() {
iw.close();
});
}
initialize();
I'm afraid there is nothing you can do to get the desired result(the position is correct, so when the position exists multiple times on a map, the API has to make a decision).
What you can do: set the optimized-option of the marker to false, then they will not be repeated at lower zoom-levels
Related
I've got an application that runs an instance of the Google Maps API in a JavaFX WebView, and am trying to allow the user to move the map marker around.
I've tried the following:
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
}
As well as:
google.maps.event.addListener(map, 'click', function(event) {
marker.setMap(null);
marker = null;
marker = new google.maps.Marker({
position:event.latLng,
map: map
});
}
Both of these implementations create the same issue: Clicking on the map creates a marker at the new position, but the old position marker remains on the screen as well. Moving the map around and forcing the section with the old marker to reload removes that marker, leading me to believe this is not an issue of implementation but a bug in the web browser's handling of it. Any way to fix this, so that there isn't a duplicate marker left behind?
I think this is a matter of code implementation. Try this. Tested this on jsfiddle and it's working perfectly.
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922 }
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true,
});
google.maps.event.addListener(map, 'click', function(e) {
updateMarkerPosition(marker,e);
});
}
function updateMarkerPosition(marker, e){
marker.setPosition(e.latLng);
}
If this seamless execution is not reflected in your JavaFX application, then it's not Google Maps API that has the problem.
Edge scrolling
Let's say I've created a simple map with default options, a draggable marker and a draggable shape (I've tested it with circle, rectangle, polygon and polyline). When I drag the marker or shape to the edge of map canvas, the map starts scrolling and that's fine.
JSFiddle demo
The problem
When I set map's draggable property to false, the edge scrolling doesn't work anymore with the marker, but all the shapes ignore it and the map is still scrolled - and that's unexpected behaviour.
var mapOptions = {
...
draggable: false
};
JSFiddle demo
The problem exists in both release (3.16) and experimental (3.17) versions. I've reported it on google's bugtracker, but it will probably take years before they fix it. So, does anyone know a workaround?
Edit: for the sake of simplicity, let's assume that zooming the map is also disabled
You will need to listen to the map zoom_changed, bounds_changed and the circle dragend events.
If the shape is dragged outside of the defined bounds, set it back to its last position and set the map center to the original value.
function initialize() {
var bounds = null;
var zoomLevel = 15;
var center = new google.maps.LatLng(20.291, 153.027);
var mapOptions = {
zoom: zoomLevel,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN,
draggable: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: center,
draggable: true
});
var circlePos = new google.maps.LatLng(20.281, 153.037);
var circle = new google.maps.Circle({
map: map,
center: circlePos,
radius: 100,
strokeWeight: 1,
fillColor: '#000000',
fillOpacity: 1,
draggable: true
});
google.maps.event.addListener(map, 'zoom_changed', function () {
// If user changes zoome level, get the new level and the new map bounds
zoomLevel = map.getZoom();
bounds = map.getBounds();
});
google.maps.event.addListener(map, 'bounds_changed', function () {
// Get the initial map bounds if not set yet
if (!bounds) {
bounds = map.getBounds();
}
});
google.maps.event.addListener(circle, 'dragend', function () {
var position = circle.getCenter();
if (bounds.contains(position)) {
// Update the circle position
circlePos = position;
} else {
// Set the circle back to its last position
// Reset the map center as it might have changed
circle.setCenter(circlePos);
map.setCenter(center);
}
});
};
JSFiddle demo
Kindly note that you can eliminate the zoom_changed event listener if you disable the zooming options on your map. Problem if a user can use the zoom is that your shape can still disappear from the map bounds if the user zooms in, which can be confusing.
Google fixed it in version 3.19, it now works properly.
White bottom tip of marker infowindow appears in upper left corner of map when moving mouse quickly over both markers left-right-left.
See it in action here http://jsfiddle.net/WGy4g/3/
var map = null;
initialize();
function initialize() {
var mapOptions = {center: new google.maps.LatLng(-34.397, 150.644),zoom: 8};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
addMarker(-34.397, 150.644);
addMarker(-34.377, 150.534);
}
function addMarker(lat,lng) {
var marker = new google.maps.Marker({position: new google.maps.LatLng(lat,lng), title: "marker"});
marker.setMap(map);
google.maps.event.addListener(marker, 'mouseover', function() {
if (!this.infowindow) {
this.infowindow = new google.maps.InfoWindow({content: 'abc'});
}
this.infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
this.infowindow.close();
});
}
Posted a bug report: https://code.google.com/p/gmaps-api-issues/issues/detail?id=6746&thanks=6746&ts=1401343988
Possible duplicate of Google map js api version 3 infowindow glitch
I can confirm that this happens in both IE and Google Chrome. It appears to be an issue with the Google Maps API, therefore you were right to list this as a bug. To try working around the problem in one of my own scripts, I have tried; using the setPosition method of the InfoWindow class to set specific LatLng coordinates to 0,0 before invoking the open method; and fiddling around with the pixelOffset property through the setOptions method, but to no avail. I also considered changing the visibility state of the InfoWindow back and forth, but there is no easy way of doing this.
Waiting for the bug to be fixed appears to be the only feasible option.
I've found custom Google Maps icon images that can be laid out as a sprite (matrix of small pics). I effectively want to create custom icons which are numbered 1-10 (for my 10 results per page) and also have mouseover effects (change color).
I'm not sure how to do this. The relevant code is the following:
$('.entries').each(function(index){
var entry=$(this);
latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));
marker[index]=new google.maps.Marker({
position:latlng[index],
map:map,
icon:image_url
});
if(marker[index]){
marker[index].setMap(map);
}
Even if I can't make it a sprite (which seems unlikely right now) I'd like to change the icon on mouseover.
I've tried to do so and created a hack that SORT of works. The problem here is that the map flickers occassionally when reset. Is there a better way?
google.maps.event.addListener(marker[index],'mouseover', function(){
entry.addClass('map-hover');
// alert(marker[index].icon);
marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
marker[index].setMap(map);
});
google.maps.event.addListener(marker[index],'mouseout', function(){
entry.removeClass('map-hover');
marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
marker[index].setMap(map);
});
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
This code might help you to get an idea about placing custom markers.
I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: http://css-tricks.com/google-maps-slider/ I like working with jQuery better than pure JS, and this tutorial makes a nice way to click on a place in a list to display the marker in the map.
I liked it that way, but I need to add infowindows to the marker. Which I did, but when I click on a place on the list and the map pans away, the infowindow stays open! I think it's because I need to attach the infowindow.close() to the event of clicking on a "#locations li".
Here's my code, which runs on document.ready:
$(function() {
var chicago = new google.maps.LatLng(41.924832, -87.697456),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").click(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Chicago level
// map.setZoom(10);
}
// Move (pan) map to new location
function move(){
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
}
move();
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map
});
// Infowindow: contenido
var contentString = '<p>'+$el.find("h3").html()+'</p>';
contentString += 'hola' ;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
content: contentString
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
//map.setZoom(14);
infowindow.open(map,curMarker);
});
It looks like you're creating a new InfoWindow for each marker. Quoting from the Google Maps API Docs:
If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).
Therefore, you may simply want to create one InfoWindow object just after you initialize your map, and then handle the click event handler as follows:
google.maps.event.addListener(curMarker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, curMarker);
});
Then the InfoWindow should automatically close when you click on a new marker without having to call the close() method.