We Keep Coding

JavaFX: Google Maps in a WebPane - Moving a Marker leaves old one behind

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.

Google Map marker not showing after uploading to server, locally works fine

I'm trying to implement a simple page that have google maps enabled, but I'm having an issue where my google maps marker is not showing after uploading the files to the hosting, it works fine locally.
I tried both using a custom marker and the default one, the issue is the same, it works locally but doesn't after uploading.
Here's the script I'm using
/*GOOGLE MAPS*/
function initialize() {
// Declare map style
var grayscale = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];
var mapOptions = {
center: {lat: 46.211000, lng: 16.913157},
zoom: 13,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Change map style
map.setOptions({styles: grayscale});
var image = 'img/vemo-google-map-marker.png';
var marker = new google.maps.Marker({
position: {lat: 46.211000, lng: 16.913157},
map: map,
title: "VEMO TRADE d.o.o.",
icon: image,
});
}
google.maps.event.addDomListener(window, 'load', initialize);

You need to specifiy whole absolute path here:
var image = '//YOUR_DOMAIN/img/vemo-google-map-marker.png';

Google Maps - displays blank when browser language changed

I display a google map on a web page, based on latitude and longitude. All works fine. But if I change my browser language to any language (e.g. French, German) from the default English, then the map goes blank (google map box displayed, but no map).
I tried adding language=en to the script link; makes no difference. Anyone who can shed some light?
Code is shown below:-
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng("50.00123", "0.012311");
var mapOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('mapdiv'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Event Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

google maps API v3 set marker and get point

I have a problem to set marker and get latitude and longitude for that marker. How can I do that in google maps v3 API
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("divGoogleMaps"), myOptions);
google.maps.event.addListener(map, 'click', function() {
});
this is my start code.

You should check Google Maps API doc web-site they have a fex example to help you started.
http://code.google.com/apis/maps/documentation/javascript/basics.html
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
Here you set a marker and get the position.

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
Taken directly from Google Maps API v3
If you want to attach an event listener to the marker, it is advisable to do it right after you add it to the map, while you still have a fresh reference to it (in the case where you're potentially looping through some marker adding code, as is common).

Custom Google Maps Icon Using Sprite

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.