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/
Related
Everything works fine with InfoWindow on markers and marker clusters, except all markers and marker clusters can't trigger when page load.
This is my code so far. (See my JSFiddle)
How do I trigger a click event on all markers and marker clusters by default?
I added google.maps.event.trigger(marker, 'click') but it didn't work.
What do I need to change in the initialize function to make this work?
e.g. https://jsfiddle.net/jacobgoh101/7Lg1q5fL/7/
The problem is that there is only one infoWindow variable. Whenever you click the marker, it overwrite the previous infoWindow. So there can only be 1 infoWindow at a time.
Therefore, you gotta create multiple infoWindow variable, and set them immediately after you init the markers, not after click.
for (i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
var newInfoWindow = new google.maps.InfoWindow();
newInfoWindow.setContent("<a target=\'_blank\' href=\'" + marker.getTitle() + "\'>" + marker.getTitle() + "</a><br />" + marker.content + "kWh");
newInfoWindow.open(gm_map, marker);
infoWindowArray.push(newInfoWindow);
// ...........
}
(Your code is a bit messy so I only edit the necessary part to give you the idea. Hope this is enough for you to build on top of.)
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 )
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'm building a website with ASP.NET MVC where one feature displays some points on a Google map, using the Google Maps Javascript API. As I have a lot of points, I don't want to fetch them all; rather, I want to get only the ones that are in the current view area that the user is looking at on the map (the bounding box).
To do that, I will make an AJAX request to my C# code that returns all the points inside a certain bounding box. However, I need to somehow create an event handler that catches whenever the map is panned or zoomed by the user.
How can I detect when a map using the Google Maps Javascript API is panned or zoomed and fire an event handler?
UPDATE: I know that I have to implement an event listener. Can someone point me towards a list of events that I can use for the Map object? click is one of those events, but what are the ones that relate to zooming and panning?
It looks like you're looking for the idle event:
This event is fired when the map becomes idle after panning or zooming.
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Events</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'idle', function() {
var bounds = map.getBounds();
console.log('North East: ' +
bounds.getNorthEast().lat() + ' ' +
bounds.getNorthEast().lng());
console.log('South West: ' +
bounds.getSouthWest().lat() + ' ' +
bounds.getSouthWest().lng());
// Your AJAX code in here ...
});
</script>
</body>
</html>
In addition, you can find the list of all events exported by the google.maps.Map object from the API Reference:
Google Maps Javascript API V3 Reference: Map Class
i think you need use an listener...
in this case an event listener..
gmaps events reference
if you use v3 search on v3 reference for listeners
this is a list of Gevents-> here
probably are not listed all