I'm trying to build a really useful web service and want to simplify the place choose using google maps. Is there any possibility to get longitude and latitude and write it down to input tags just by clicking on the map?
Here's how i would do this:
var map = ...;
google.maps.event.addListener(map, 'click', function (event) {
$('input.latitude').val(event.latLng.lat());
$('input.longitude').val(event.latLng.lng());
});
Related
I have a MySQL address database which contains all the necessary information to look up the address on google maps. Each row with data contains an extra field naming LATLNG. Which contains the Lat and Lng in the preferred format of google maps. ####, ####. I have already created a viewing page with a ‘show’ button to display the content on a separated html page in Google maps with the address above it.
The problem is that I could find all kinds of tutorials (also from google themselves) with the vast possibility’s that google maps provide. The feature I would like to use however isn’t found in a tutorial. And whatever I do, I seem to get stuck with the result of it.
Example (own database):
After each address field there is a button with the next caption:
echo '<td>Show</td>';
Example (google maps) what opens after pressing the SHOW button:
<script>
function myMap() {
var Lelystad = new google.maps.LatLng(LAT LNG INFORMATION);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: TOWN NAME, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:TOWN NAME});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "DISPLAY CONTENT OF ADDRESS ABOVE MARKER"
});
infowindow.open(map,marker);
}
</script>
What I want is that after pressing the ‘show’ button the latlng from that given address is being picked up by google maps and show it.
Hopefully someonw can help me, if some of the information is not clear enough don't hesitate to ask me.
I am not sure you want to use the JavaScript. There is a very simple API giving you the latitude and longitude through a URL:
http://maps.googleapis.com/maps/api/geocode/json?address=eiffel%20tower,paris
where "address" is the address you are looking for. You must first register to obtain a key and you are limited to 2500 requests per day (but you can store the results in the database).
See full documentation here: https://developers.google.com/maps/documentation/geocoding/intro?hl=fr
Im using the Google Places Autocomplete API, to have an input in which users type a city and get suggestions for which place they are searching for.
I need to get not only the name of the place but the Latitude and Longitud of the place for then centering a google map there.
The problem is that Google Places Autocomplete API just returns description of the place but not the coordinates, at least with what i tried.
Anybody knows if there is a way to get the Latitud & Longitud in the same request?
Many thanks to any help :')
All the information you are looking for can be found inside the Place Result. This is what your code would look like:
var input = document.getElementById("address");
var autocomplete = new google.maps.places.Autocomplete(input, {types: ["geocode"]});
autocomplete.addListener("place_changed", function() {
var placeResult = autocomplete.getPlace();
var name = placeResult.name;
// The selected place's position
var location = placeResult.geometry.location;
// The preferred viewport when displaying this Place on a map.
// This property will be null if the preferred viewport for the Place is not known.
var viewport = placeResult.geometry.viewport;
// This is assuming your google map is saved in a variable called myMap
if (viewport) {
myMap.fitBounds(viewport)
}
else if (location) {
myMap.setCenter(location)
}
});
I recently created a jQuery plugin that makes interacting with Google Maps Autocomplete a breeze. This would be the code to center a map every time a place was selected:
$("#address").geocomplete({
map: myMap
});
The plugin will also allow you to autofill an address form, adds custom styling, provides callbacks and fixes an annoying scrolling issue.
This question already has answers here:
How to get a click event when a user clicks a (business) place on the map
(2 answers)
Closed 8 years ago.
I need to retrieve google place data (e.g. place_id) for a specific location (point-of-interest), based on a user clicking on that location on the map.
I have tried adding a click-handler to the map object in order to get the co-ords of a user click - however, this is not called if the user clicks on a point-of-interest (there are similar, but not the same, SO questions around this - but none with a satisfactory answer).
I can't see anything in the maps / places APIs that does this - but it seems like a fairly basic requirement to me, so maybe I'm just missing something?
Thanks in advance,
Neil.
Try this: http://jsfiddle.net/lotusgodkk/x8dSP/3584/
google.maps.event.addListener(map, "click", function (event) {
var lat = event.latLng.lat(); //Get latitude from point of click
var lng = event.latLng.lng(); // Get longitude from point of click
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'latLng': new google.maps.LatLng(lat, lng)
}, function (results, status) {
alert(results[0].formatted_address); //Final address from lat and lng
});
});
See the demo for more code.
You can get latitude longitude and place name as well. Is this what you need?
In google maps API, I show a direction.
I would like to delete the start and end markers (A and B) without deleting waypoints markers.
I know the "suppressMarkers" option but it suppresses waypoint markers.
My direction is draggable so it's not easy to make my own waypoints markers.
Could you please help me ?
Thank you.
Suppress the markers and then manually add markers for just the waypoints:
var my_renderer = new google.maps.DirectionsRenderer({suppressMarkers: false});
for (waypoint in list_of_waypoints)
{
var marker = new google.maps.Marker({position: waypoint_location});
marker.setMap(your_map);
}
I want to have my directions page having the same functionality as this page i.e. the Google Map object is updated from the form on the right. How can I have this in my pages? I'm using Django BTW, but I don't think this will matter much...implementation should be universal for something like this.
I've done this within a Drupal Site. The code API is pretty straight forward. You can generate the initial interactive map using your longitude and latitide as the center point.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
Then you need to have your directions form make a call to the Google Geocoder. This will turn the address entered into longitude and lattitude - although you maybe able to bypass this step.
Then, use the newly acquired Long & Lat to generate a directions request (Google API, again).
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.351505,-71.094455), 15);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}
All of the Javascript can go directly in your HTML. I suggest you take some time to study http://code.google.com/apis/ajax/playground/