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 )
Related
Is it possible to integrate google maps api into a html form where a user can select a specific pin point location in the form of co-ordinates and submit them with your form?
I am using asp.net with Razor views, however I doubt that will effect the answer to this question in anyway.
I have had a look at https://developers.google.com/maps/documentation/javascript/tutorial and cant seem to find using the maps api as a form input. Unless maybe im' blind.
Add a draggable marker and store the lat/lng values in hidden inputs on dragend (event docs).
// Place a draggable marker on the map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"
});
//get marker position and store in hidden input
google.maps.event.addListener(marker, 'dragend', function (evt) {
document.getElementById("latInput").value = evt.latLng.lat().toFixed(3);
document.getElementById("lngInput").value = evt.latLng.lng().toFixed(3);
});
You can create an eventlistener initializing the marker first.
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
//position: new google.maps.LatLng(yourLat, yourLng),
});
google.maps.event.addListener(marker, 'dragend', function (event) {
$("#yourinputlat").val(this.getPosition().lat().toFixed(6));
$("#yourinputlng").val(this.getPosition().lng().toFixed(6));
});
I've been using this to get the location with latitude and longitude from a google map and then insert it in an input to be sent with the POST
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.
I am using Google StreetView, and would like to allow placement of markers by the user.
For example, if it's just a Google Map (rather than the StreetView) I can do:
google.maps.event.addListener(map, 'click', recordPosition);
function recordPosition(e) {
var marker = new google.maps.Marker({
position : e.latLng,
map : map,
icon : cafeMarkerImage,
title : 'Centre of the universe ' + numberOfClicks
});
numberOfClicks++;
}
and when the user clicks, the cafeMarkerImage is put under the mouse cursor.
Once these markers are added to the map, switching to StreetView shows them correctly... however, I'd like to add them in StreetView, not map view.
However, in StreetView, the 'click' event is not available.
I want to find the latLng of the center of the "pancake" that is shown in StreetView during mouse motion --- once the user clicks.
Odi's answer gets me some of the way there, but I'm still stuck: The click gets me the CURRENT position of the Street View POV, but then it changes immediately to where I clicked. So if I grab the POV on the click and do the annotation I need there, but user can no longer see it because the view changes.
You can use the StreetViewPanorama layer, which provides you with the appropriate events and data.
I guess what you want is the position_changed event. See this good example of how to use the event and retrieve the according data.
In short:
var start = new google.maps.LatLng(47.500613, 8.724575);
var panoramaOptions = {
position: start,
pov: {
heading: 20,
pitch: 0,
zoom: 1
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
google.maps.event.addListener(panorama, 'position_changed', function() {
console.log(panorama.getPosition().toString());
});
I am new to Google Maps programming, and I want to :
add a pushpin onclick
get the clicked point location
in addition, I want to code this in javascript(&jquery)
In fact, here is an example of what I mean
http://www.gorissen.info/Pierre/maps/googleMapLocation.php
so, can anyone provide me with information about how I can code it?
Kind regards!
GEvent is Maps API 2 which is deprecated. You should be using Maps API 3 instead (especially if you're starting out 'new' and not having to maintain an old API 2 site). And when you do, something like this should work:
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
I have been looking for a script which lets you search a map for a location and lets you click the map to put the clicked coordinates into a form. So far I have had no luck!
Any ideas? Thanks!
using v3 api to click on the map and get the lat/lng of the location:
google.maps.event.addListener(map, 'click', function(e){
alert('lat: ' + e.latLng.lat() + ' lng: ' + e.latLng.lng());
})
see example http://jsfiddle.net/6aGf7/