get latitude and longitude when click POI at google map javascript [closed] - google-maps

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I want to get POI's latitude and longitude when click POI. As you can see there is POI's latitude and longitude included on URL bottom of the image.
I think it's not available at documentation.
I remember that google map api for Android provide POI's latitude and longitude when I tested 3 months ago.

In order to get a latitude and longitude of the POI when you click on it, you should add a click event listener on the map object. Each time you click on the POI, the map will trigger an event of type google.maps.IconMouseEvent:
https://developers.google.com/maps/documentation/javascript/reference/map#IconMouseEvent
You just need to check if event has placeId field and stop event propagation to prevent default info window if it is necessary.
Have a look at the following example that demonstrates how to extract place ID and coordinates of POIs.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.3850639, lng: 2.1734035},
zoom: 19
});
var infowindow = new google.maps.InfoWindow();
map.addListener('click', function(event){
if (event.placeId) {
event.stop();
infowindow.close();
infowindow.setPosition(event.latLng);
infowindow.setContent(
'<div>'
+ '<strong>You clicked place</strong><br>'
+ 'Place ID: ' + event.placeId + '<br>'
+ 'Position: ' + event.latLng.lat() + ',' + event.latLng.lng() + '</div>');
infowindow.open(map);
}
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>
I hope this helps!

Related

Why doesn't this lat/lon coordinate find nearest road in Google Maps API [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Problem
I'm using the Google Maps API Nearest Road to find the nearest road given a lat/lon coordinate.
I've run into a lat/lon coordinate that does not return anything and I have no idea why. The location of this lat/lon coordinate is right next to a road in North Carolina.
https://roads.googleapis.com/v1/nearestRoads?points=35.77747,-82.4603&key=`{GOOGLE_API_KEY}`
Why does this return {}?
Google Map Location
My guess is your point is too far from the road.
You might want to use the DirectionsService (Web Service), setting the origin and destination to your input point.
That seems to have a larger tolerance (although still limited) to finding the nearest road.
https://maps.googleapis.com/maps/api/directions/json?origin=35.77747,-82.4603&destination=35.77747,-82.4603&key=`{GOOGLE_API_KEY}`
returns:
// snip
"end_location" : {
"lat" : 35.777998,
"lng" : -82.4598565
},
// snip
"start_location" : {
"lat" : 35.777998,
"lng" : -82.4598565
},
// snip
Related questions:
Maps API - Marker on the street
Google Street View JS gives me a view of the side of the house instead of the front
Google maps api - snap marker to nearest road
proof of concept fiddle
code snippet:
const point = {
lat: 35.77747,
lng: -82.4603
}
function initMap() {
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
preserveViewport: true
});
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: point,
});
const marker = new google.maps.Marker({
map: map,
position: point,
title: "input point"
})
directionsRenderer.setMap(map);
calculateAndDisplayRoute(directionsService, directionsRenderer);
}
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
directionsService.route({
origin: point,
destination: point,
travelMode: google.maps.TravelMode.DRIVING,
},
(response, status) => {
if (status === "OK") {
directionsRenderer.setDirections(response);
} else {
window.alert("Directions request failed due to " + status);
}
}
);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Directions Service</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>
</html>

How can you customize the contents of popups when you click on built-in locations (not markers) in a map from the Google Maps API?

I'm talking about this sort of pop-up, which appears when you click on a store (etc.) in Google Maps:
In my case (a covid-related volunteer project) we want replace the View on Google Maps CTA with a link to a page in our web app, with the store information pre-filled. That may be impossible (pointers welcome if not), but knowing how/whether you can customize the popup at all is the first thing.
As I understand, your intention is replace standard Google Maps info window for POIs with your custom info window information. There is no way to modify predefined info windows of POIs via Google Maps JavaScript API. However, you can prevent the predefined info window of POI and show your own info window instead. For this purpose you should add a click event listener on your map. Each time you click on the POI, the map will trigger an event of type google.maps.IconMouseEvent:
https://developers.google.com/maps/documentation/javascript/reference/map#IconMouseEvent
So, if event has placeId information, that means you clicked POI, in this case you can stop propagation of the event to prevent standard info window and create your own info window.
Have a look at following code snippet
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.414571, lng: 78.480922},
zoom: 19
});
var infowindow = new google.maps.InfoWindow();
map.addListener('click', function(event){
if (event.placeId) {
event.stop();
infowindow.close();
infowindow.setPosition(event.latLng);
infowindow.setContent(
'<div>'
+ '<strong>You clicked place</strong><br>'
+ 'Place ID: ' + event.placeId + '<br>'
+ 'Position: ' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>'
+ 'Put here information that you need'
+ '</div>');
infowindow.open(map);
}
});
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>

Custom Google Maps marker HTML [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm embedding a Google maps style footer, with a div overlay containing things like working hours, or contact info. I'm also trying to incorporate a custom location marker, something like this:
Can anyone help me with this?
Thanks!
Assuming you're using the google maps API, you can use this code.
function initMap() {
// store latitude and longitude for map and marker
var myLatLng = {lat: -25.363, lng: 131.044};
// create a map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
// create a custom marker
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
icon: 'my-image.png'
});
}
This code created a myLatLng variable which stores the Latitude and Longtitude, it then creates a map object. I assume you already have that setup if you have a map in your site.
The code then declared a marker, using the same latitude and longitude at the map via the position property, setting a title via the title property and choosing the image that will be used on the marker via the icon property.
This function was initially lifted straight from the documentation found at: https://developers.google.com/maps/documentation/javascript/markers

how to get lat long on mouse pointer in google maps? [duplicate]

What I would like to do is create app where when anyone clicks on the map object and two fields get filled with latitude and longitude at every click. Is there sample code of Google Maps V3 JavaScript API (Geocoding API) somewhere out there that does something like that?
You can achieve this with google.maps.event' LatLng property:
Something like this would show how it works. Here is a JSFiddle Demo:
google.maps.event.addListener(map, 'click', function(event){
alert('Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng());
});
Where map is your google map object. Yes the example is in V2 i think, and if you would like to create a marker on click you can simply create it within the click callback function.
Here is a complete code for version 2 which i had been using for a long time and i have published in the site.
http://vikku.info/programming/google-maps-v2/get-lattitude-longitude-onmouseover-and-onmouseclick-google-map-v2.htm
just click view source code from your browser and copy save the contents. it will work perfectly. only thing is you need to change the map api key.
Here is the code for google map version 3
http://vikku.info/programming/google-maps-v3/get-lattitude-longitude-onclick-and-onmouseover-google-map-v3.htm
function onload()
{
var map= new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
google.maps.event.addListener(map, 'click', function(event){
alert('Lat: ' + event.latLng.lat() + ' and Longitude is: ' + event.latLng.lng());
}
After loading code you can write this code to get latitude and longitude of fix points.
please try
var map = [google map];
google.maps.event.addListener(map, 'click', function (mouseEvent) {
alert(mouseEvent.latLng.toUrlValue());
});

Google Maps V3 InfoWindow ignores latLng position

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); .