We Keep Coding

Apply a “long touch” event handler on Google Maps

With my team we are developing an app using Ionic 2, to help the people to navigate the streets considering accessibility restrictions.
The idea is that the user can touch doing a long press (for example 1 second) in somewhere on the map, and open a modal in order to he can report an issue in that point (for that latitude and longitude).
How can I apply a "long touch" event handler, similar a "press" in Hammer.js, on Google Maps?
Is it possible to get the coordinate where the user touchs in the map?
Thanks!!

I dont know whether there is a "Long touch" but we can get the coordinates on the user touch.
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(event){
console.log('Current Lat: ' + event.latLng.lat() + ' Current Lng: ' + evt.latLng.lng());
});
Hope it helps :)
( Here is some docs for maps Doc which helps you )

Google Maps API v3.0 Saving a reference to a marker

I am using Google Maps API v3.0
The map have MULTIPLE markers (so any examples of using 1 marker isnt what I am after)
Things are going ok so far.. but I am not clear on how you can save a reference to a specific marker when it is clicked? (which I have read as a suggestion few places, but no examples)
There are two separate instances where I would like to have a direct target/reference back to a specific marker to control/change the behavior/image..etc (whatever).
Example of scenario #1:
1.) When I click on a marker, I am currently 'bouncing it' as well as changing its icon to a different image. If I click on a new marker.. I want to target the OLD marker to stop bouncing/revert back to old icon. I have accomplished this by running a loop over my 'marker' array and stop all animations on all markers.. and changing all icons to the old (original) image. It works.. but I would like NOT to have the overhead of running through the loop. Going forward, I would like to change the old marker to a 3rd icon image.. (to show it has been interacted with before).. so I need a way to save/set a reference to a marker once it is clicked.. so I can target it again (directly)
Example of scenario #2:
1.) I have some 'controls' (elements) outside of the map, that I would like to use to interact with the map, as well as specific markers.
ie: Have an image of the marker/entry OUTSIDE of the map.. where a user clicks on it.. and it scrolls/pans the map to that specific marker (as well as changing animation and icon image)
Here is my current click listener:
google.maps.event.addListener(addr[n], 'click', (function(marker, n) {
return function() {
infowindow.setContent(addr[n].title + "<br />" + addr[n].company + "<br />" + addr[n].workphone);
infowindow.open(map, addr[n]);
//increase z-index when marker has focus
addr[n].setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}
})(marker, n));
Q:
How can I save a DIRECT reference to a marker on the map when it is clicked, to be used in another function and referenced there?
In response to MuffinMan:
Thanks... I'm still not clear though, at least as to how it relates to my project.
I -am- saving things into an array already. (addr[n] from above)
Here is the class method that is building my addr[n] array for me:
public static function GMapMarker($markerId, $memberObject, $addressObject){
$marker = 'var m_'.$memberObject->Id.'_'.$addressObject->AddressNum.' = new google.maps.LatLng('.$addressObject->Lat.','.$addressObject->Lon.');
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: m_'.$memberObject->Id.'_'.$addressObject->AddressNum.',
title:"'.addslashes($memberObject->Full_Name).'",
company:"'.addslashes($memberObject->Company).'",
icon:"marker_gd.php?m=' . $markerId . '",
markerid:"'.$markerId.'",
id:"'.addslashes($memberObject->Id).'",
addressnum:"'.addslashes($addressObject->AddressNum).'",
refid:"m_'.$memberObject->Id.'_'.$addressObject->AddressNum.'",
workphone:"'.addslashes($memberObject->Work_Phone).'",
zIndex: '. (100 - preg_replace('/\D/','', $markerId)) .'
});
addr.push(marker);';
return $marker;
}
I have no way of knowing what order/index in the array that particular marker is. However I do have the unique name given and that markers lat/lon coords....
But I am NOT clear how to use it to target a marker later on?

Here's what I used in my implementation:
var markers = [];
for (var index = 0; index < data.length; index++) {
var latlng = new google.maps.LatLng(data[index].lat, data[index].lng);
var marker = new google.maps.Marker({position: latlng, map: map, title: data[index].label, icon: 'images/dot.gif'});
google.maps.event.addListener(marker, 'click', function() {
markers.push(marker); /* marker saved here for later reference*/
});
}
markers[] is populated with the markers you want for later use. E.g. markers[0].
You can add other listeners that javascript supports to handle other events on the marker, such as dragging and hovering.

Setting InfoWindow Postion in Google Maps

I am drawing a set of Polygons on to Google Maps and would like to have an InfoWindow pop up at the center of each when I click on it.
function attach_info_window(polygon, centroid, title){
var info_window = new google.maps.InfoWindow({
content: title,
position: { lat: centroid[0], lng: centroid[1] }
});
google.maps.event.addListener(polygon, 'click', function() {
info_window.open(map, this);
});
}
The problem is, the window shows up in the NW corner every time. The 'position' parameter seems to be ignored completely. I also tried setting the position on click with
event.latLng
But that returns undefined, even though the API docs specify it, so that doesn't work either. Curiously, it works just fine if I use a Marker instead of the Polygons.

I solved this by removing the second argument in open()
info_window.open(map)
works great. I was passing "this" in order to bind it to that specific polygon among many. I still don't understand why this works, and neither
info_window.open(map, poly)
nor
info_window.open(map, this)
works

This:
info_window.open(map, this);
Will not work for anything but a google.maps.Marker. The second argument of InfoWindow.open can only be a google.maps.Marker, a Polygon or Polyline won't work there.
from the documentation
"In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property"

Why Google Maps JavaScript is not showing a map right when i click it second time?

I am using Google Maps JavaScript API v3 for showing locations on the map in my web application. In my html I have:
<script src="jquery-mainpage.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB4LCwxrO5EzHnAQXCkP9fjREUEhOPCol4&sensor=false">
</script>
And this is how I am making a map when update button is clicked in jquery-mainpage.js:
$('#updatebtn').unbind("click");
$('#updatebtn').bind('click', function(){
var keystring = $('#key').text();
$.ajax({
type: 'POST',
url: 'http://localhost:8888/jsgooglemaps',
data: {keystr: keystring},
success: function(result) {
var obj = jQuery.parseJSON(result);
var centerLatLng = new google.maps.LatLng(obj.centerLat,
obj.centerLong);
var myOptions = {
center: centerLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true
};
var map = new google.maps.Map(
document.getElementById("map_canvas_1"),
myOptions);
var markerArray = obj.locations;
for(var i=0;i<markerArray.length;i++){
var myLatlng = new google.maps.LatLng(
markerArray[i].latitude,
markerArray[i].longitude);
var marker = new google.maps.Marker({
clickable: true,
position: myLatlng,
map: map,
zIndex: i
});
google.maps.event.addListener(marker, "click", function() {
var tempLatLng = new google.maps.LatLng(0, 0);
this.setVisible(false);
this.setPosition(tempLatLng);
var j = this.getZIndex();
markerArray[j].latitude = 0;
markerArray[j].longitude = 0;
});
}
}
});
});
On first click it shows everything right. but when i click update button again then it doesn't show map right. I am attaching both screen shots. Can anybody tell me why is it happening. Thanks in advance.
Map on first click
Map when i click update button again

You don't want to repeatedly create a new instance of the map, because there is a known bug that prevents the memory from previous map instances from being garbage collected. Check out this question and the discussion and resulting answers: What is the Proper Way to Destroy a Map Instance?
In the answer to that question, there is a link to a video presented during a Google Maps Office Hours session by Chris Broadfoot and Luke Mahe from the Google Maps team that explains they do not support use cases that involve repeated creation of map instances. You will be much better off keeping a single instance of the map and reusing the same map throughout your user's session.

I am creating map_convas_1 div from the ajax success code and removing it when updating is done. and then creating it again whenever user clicks update button. Its working fine.

It works. Thank you very much, your "remove code from div" option works for me, my problem was that second time it doesn't work, if I'm resizing the screen it works but not is a natural way that user resize the screen to see the map.
I'm using Jquery to remove div code. In my case I was using the jquery dialog, then when I close the dialog I'm replacing the html from the div (where google maps is showing the map) with the original div code.
My original div code was
<div id="mapaLocalsub" style="width:500px; height:450px; " ></div>
I notice that after google maps was working it fills the div with a lot of things and style, then in the close function from my Jquery.dialog I'm replacing the html with my original div code:
$( "#mapaLocal" ).dialog({
height: 450,
width: 500,
modal: true,
close: function() {
$( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px; height:450px; \" ></div>");
}
});
But of course, you can use the Jquery html method in a function that you call when close the function or before creating your map, hope it helps.
$( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px; height:450px; \" ></div>");

Show only 1 marker at a time fron onClick

I've got the following onClick function...
GEvent.addListener(map, "click", function(overlay, latLng)
{
if (latLng) {
marker = new GMarker(latLng, {draggable:true});
marker.openInfoWindowHtml(mes);
}
// display the lat/lng in your form's lat/lng fields
document.getElementById("lat").value = latLng.lat();
document.getElementById("lng").value = latLng.lng();
});
basically I want to make it so only a marker shows on the most recent click. I've been looking at this question Googlemaps - removing previous marker but can't really figure out how I'd apply that to my code. could someone help me out?
Thanks.

One could use a variable within an object, and determine whether that variable has been set where it tracks the current marker that is visible, and set the marker to be invisible, unset it before adding the marker that is currently being shown.