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/
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.
I'm writing an Android app. I'll need to find out the part of the map that falls under the MBR that is constructed using 2 given points.
Is this possible through Google Maps API? please help me.
Thanks in advance,
Bharat
this is what fitBounds is for:
var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(35, 10)); // point 1
bounds.extend(new google.maps.LatLng(40, 15)); // point 2
map.fitBounds(bounds);
http://jsfiddle.net/jhTLL/
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'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());
});