Google Maps V3 InfoWindow ignores latLng position - google-maps

My map has no markers. In response to a click on the map, it pops up an infowindow with Lat/long shown in decimal to 5 dp and in Degrees minutes seconds. An open window is always closed prior to responding to a new click. The position is specified by position: latLng, but the infowindow is ALWAYS at the top left. I've spent days on this, and I feel I'm missing something. Code snippet below. Any ideas?
google.maps.event.addListener(map, 'click', function (event) {
var lat = event.latLng.lat(),
lng = event.latLng.lng(),
latLng = event.latLng,
strHtml;
//
// strHtml build code omitted but succesfully uses lat and lng to produce
// e.g. Latitude : 51.72229 N (51° 43' 20'' N)
// Longitude : 1.45827 E (1° 27' 30'' E)
//
// If an infowindow is open, then close it
if (openedInfoWindow != null) openedInfoWindow.close();
// latLng monitored to check it is there before use in infowindow
alert(latLng); // returns correct values which position then ignores!
var infoWindow = new google.maps.InfoWindow({
position: latLng,
content: strHtml,
maxWidth: 420
});
// Open infoWindow
infoWindow.open(map,this);
// Remember the opened window
openedInfoWindow = infoWindow;
// Close it if X box clicked
google.maps.event.addListener(infoWindow, 'closeclick', function() {
openedInfoWindow = null;
});
});

You have several problems with this code. The second parameter of the infowindow's open method has to be an MVCObject in the Core API only the Marker class can be used as an anchor. You should not need to set the infowindow variable to null and create a new infowindow object each time. You only need a single infowindow and then change its content and position. This way there is only one infowindow shown at a time.
Here is a fiddle of a working example: http://jsfiddle.net/bryan_weaver/z3Cdg/
relevant code:
google.maps.event.addListener(map, 'click', function (evt) {
var content = "<div class='infowindow'>";
content += "Latitude: " + evt.latLng.lat() + "<br/>";
content += "Longitude: " + evt.latLng.lng() + "</div>";
HandleInfoWindow(evt.latLng, content);
});
function HandleInfoWindow(latLng, content) {
infoWindow.setContent(content);
infoWindow.setPosition(latLng);
infoWindow.open(map);
}

The 2nd (optional)argument of infoWindow.open() is expected to be an MVCObject that exposes a position-property.
the this argument in the callback refers to a google.maps.Map-Instance(map), which is an MVCObject, but doesn't have a position-property.
Remove the 2nd argument from infoWindow.open(map,this); .

Related

Removing last marker before creating a new one

i want to create a Map with an easy function. Everytime i click, the existing Marker schould be removed and a new one schould appear at click-position.
Creating new ones works fine, but removing them doesn't work. Here the code, I tried:
var map;
var latitude, longitude;
var marker;
function placeMarker(location) {
marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: location,
});
latitude = location.lat();
longitude = locaton.lng();
document.getElementById('koordinaten').innerHTML = '<p>' + latitude + '</p>';
}
OK, comment the marker.setMap(null); i can add as much markers as i want, but i want to only have one Marker on the Map.
Can you please help me, how to remove a marker and place a new one?
Thanks
When you run this function the first time, the first line will result in an error, because marker still is undefined(doesn't have a setMap-method).
You may catch this case and bypass the first line :
if(typeof marker!=='undefined'){
marker.setMap(null);
}
But a better approach would be to use always the same marker and apply the new position:
function placeMarker(location) {
//when marker is undefined, create a marker
if(typeof marker==='undefined'){
marker = new google.maps.Marker({
map: map
});
}
//set the position
marker.setPosition(location);
latitude = location.lat();
longitude = locaton.lng();
document.getElementById('koordinaten').innerHTML
= '<p>' + latitude + '</p>';
}

Issue with panTo() and how to change coordinates

I've got a little issue while placing a panTo() into google maps V3. Here is the description of the problem:
In this case, everything goes well, the map moves and animates until it stops at the right point.
var infoWindow = new google.maps.InfoWindow({ content: strHtml });
google.maps.event.addListener(marker, 'click', function()
{
var latitude = marker.position.lat();
var longitude = marker.position.lng();
var panningPoint = new google.maps.LatLng(latitude, longitude);
activeInfoWindow.close();
map.panTo(marker.getPosition());
infoWindow.open(map, marker);
activeInfoWindow = infoWindow;
});
In the other case, I wrote down the map go to the panning point I decided, but instead of animating the map, it just REFRESHES (not animate) and get a similar function to "SetCenter".
var infoWindow = new google.maps.InfoWindow({ content: strHtml });
google.maps.event.addListener(marker, 'click', function()
{
var latitude = marker.position.lat();
var longitude = marker.position.lng();
var panningPoint = new google.maps.LatLng(latitude, longitude);
activeInfoWindow.close();
map.panTo(panningPoint);
infoWindow.open(map, marker);
activeInfoWindow = infoWindow;
});
Why? Are there any differences from getPosition() and collecting lat and long and redrawing a point?
My real problem is that I must pan not right on the point but "x % " bottom for top div overlay problem.
Any suggestions?

Google map goes blank when triggering click event outside

I have created a google map using V3 js API, and inside the map I am showing multiple markers. When I am clicking on a markers it does an ajax call and shows the result in the infowindow. I have added an external link outside the map, clicking on which it will display the corresponding marker result in side the map. I have used the below code to do the functionality..
$('#marker_link').click(function () {
var longitude = $(this).find("#longitude").val();
var latitude = $(this).find("#latitude").val();
var index = $(this).find("#index").val();
google.maps.event.trigger(gmarkers[index], "click", {
latLng: new google.maps.LatLng(latitude, longitude)
});
});
This code is pulling the marker data correctly and showing in a window. But at that time the map goes blank. How can we fix it. How can we keep the map along with the store result.
Here gmarkers[ ] is a global array where I am keeping all the markers that are created during the map is rendered.
The below code I have used while showing markers in the map for the first time.
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(pLat, pLong),
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function (event) {
var dataString = 'store_id=' + {{ store.store_id }}
$.ajax({
type: "GET",
url: GET_STORE_DATA,
data: dataString,
success: function(res) {
if(res != '') {
var contentString = res;
var infoWindow = new google.maps.InfoWindow({ content: contentString });
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
} else {
alert('No data found')
}
}
});
});

How to move marker on the map dynamically on click of the button

I am adding Marker dynamically and adding click event to every marker added on the map. This is the way, I am adding the marker on the map.
var pin = new google.maps.LatLng(Y, X);
var marker = new google.maps.Marker({ position: pin, map: map1 });
google.maps.event.addListener(marker, 'click', pinClicked);
marker.setMap(map1);
In the click event, based on certain conditions I am displaying a popup with certain details and buttons. One button is to close the popup and the other button is to Move marker.
What I want is when I click the Move marker button, I want the marker to be moved.
I don't want to set the draggable property to true by default, as it will be allowing the marker to be dragged when added on the map.
Marker should be draggable only when the button on the popup is clicked.
How can I get this working.
Any help is appreciated.
Thanks.
I've created this jsFiddle which shows you how to do it.
var markers = [];
function initialize() {
var myLatLng1 = new google.maps.LatLng(50.965049,5.484231);
var myLatLng2 = new google.maps.LatLng(50.97,5.474231);
var myOptions = {
zoom: 14,
center: myLatLng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < 2; i++) {
var marker = new google.maps.Marker({
position: i === 0 ? myLatLng1 : myLatLng2,
map: map,
title: 'Galaconcert ' + i,
id: i
});
markers[i] = marker;
manageBindings(marker);
}
function manageBindings(marker) {
var id = marker.id;
google.maps.event.addListener(marker, 'click', function(ev) {
var contentString =
'<div id="infowindow">' +
'Nice infowindow ' + id + '<br />' +
'<button class="move" data-id="' + id + '">move me</button> ' +
'<button class="close" data-id="' + id + '">close me</button><br />' +
'</div>'
;
marker.infowindow = new google.maps.InfoWindow();
marker.infowindow.setContent(contentString);
marker.infowindow.open(map, marker);
});
}
}
$(function(){
$('button.move').live('click', function(){
var id = $(this).data('id');
markers[id].setDraggable(true);
});
$('button.close').live('click', function(){
var id = $(this).data('id');
markers[id].infowindow.close();
});
initialize();
});
You should keep all your created markers in an array so you can access them. In an infowindow you store the reference to that array - in my example it's in button's data attribute. Then when anything happens in infowindow, you are able to access the particular marker and set it's draggable option to true.
The code should be refactored and should not use live but you should have the idea.
There is a method for Markers that allows you to set their draggable option.
Then also change the button to say place marker so that when you've dragged the marker to where you want it to be you can click it again to place the marker and set the draggable property to false again.
new google.maps.event.addListener(button, 'click', function(){
if(button.status == "Move"){
marker.setDraggable(true);
} else {
marker.setDraggable(false);
}
});
Please note this is psuedo code just highlighting the setDraggable function.
Google markers have property setDraggable by which it can be set marker draggable to true or false.
marker.setDraggable(true); or
marker.setDraggable(false);

InfoWindow not Displaying

I'm trying to have this so that someone clicks on the map, and an infoWindow pops up telling them that latlng. For now, just trying to figure out how to get an infoWindow to come up. I found a similar problem here with markers and edited the function a bit but I'm missing something which I'm sure is simple and I just cannot pin point. Here's the code:
function InfoWindow(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.infoWindow({
position: location,
content: "sam"
});
}
}
google.maps.event.addListener(map, 'click', function(event) {
InfoWindow(event.latLng);
});
}
Help greatly appreciated!
Thanks
I am using InfoBubble, it appears better than InfoWindow and it can also be handled easier. Try it.
Event is a LatLng
google.maps.event.addListener(map, 'click', function(event) {
InfoWindow(event);
});
You were correct in passing the LatLng of the event (event.latLng), not the whole event. To help with the output, I included code that splits the lat and lng up into strings. A couple other things I fixed: needs to be a capital "I" in google.maps.InfoWindow; set the content to new latLng if the window already exists; added the code to actually open the window at the end. This should take care of everything for ya
function InfoWindow(location) {
var lat = location.lat().toString();
var lng = location.lng().toString();
var new_content = "Lat: " + lat + "<br />Long: " + lng
if ( marker ) {
marker.setPosition(location);
marker.setContent(new_content);
} else {
marker = new google.maps.InfoWindow({
position: location,
content: new_content
});
}
marker.open(map);
}
google.maps.event.addListener(map, 'click', function(event) {
InfoWindow(event.latLng);
});
The Map MouseEvent has a latLng property
google.maps.event.addListener(map, 'click', function(event)
{
new google.maps.InfoWindow({
map:map,
content:"coordinates:"+event.latLng.toUrlValue(),
position:event.latLng});});
}
"map" is a reference to your google.maps.Map.
Tested on this map by pasting this into the address bar, then clicking on the map:
javascript:google.maps.event.addListener(map, 'click', function(event) {new google.maps.InfoWindow({map:map, content:"coordinates:"+event.latLng.toUrlValue(),position:event.latLng});});