I have to write a script for Google Maps V3 which will do the following:
Place a marker on a map based on a set of coordinates and possbibly change the address after the page has been loaded
Allow the user the drag the mark to replace it elsewhere
Collect the new coordinates once the marker has been moved.
The first part is basic enough and should be fine, changing the address after the page is loaded should only be a matter of calling back the same function?
I am not sure where to start on the draggable marker and collecting hew coordinates.
Would anyone know of scripts / API's or where in the doc should I start?
Have you checked the Google Maps Javascript API V3 Reference to see whether the google.maps.Marker class has :
a draggable option
an dragend event
a getPosition method
Hint: The answer might just be "yes" to all three, and you don't need much else to solve your problem.
Related
I am trying to create a Store Locator with the Google API, very similar to the one in the Google examples here:
http://storelocator.googlecode.com/git/examples/panel.html
However I've hit a wall trying to get the Store Locator API to get the user's position through Geolocation, so when I click on Get Direction in the infowindow I get directions to the user position; instead of having to type my address in the: Where are you? Panel box.
In the documentation what I have seen is that geolocation is a boolean in the View Option that is set to True by default. But this does not solve my problem.
Does anyone have any idea on how to do this?
seems that the googlecode page you said is no longer exist. So I can't give any further insight about what you want to make.
However, by your description, Luckily I made similar site few months ago. It is on Grocery Store Near Me .
The concept of Geolocation is an HTML5 (actually W3C) Geolocation API which is now already embed in most modern browser. It is an API which you can obtain user's location (latitude, longitude, altitude, and accuracy).
you can call it with simply
navigator.geolocation.getCurrentPosition(success, error, geo_options);
Success and error is a callback function in which you can define.
In my case, the function looks like these
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// use the lat and long to call function to fetch an API through AJAX
fetchStoreData(latitude, longitude);
}
In the Store Locator schema (like mine in Grocery Store Near Me), Geolocation is used to obtains user lat and long. The lat and long, then send to server via AJAX to get data about nearby store location.
The server serve an API in which accept lat and long as parameter, then fetch the store data (either using database, or other external API like foursquare), then you can display it either on list, or on a maps.
Using the new "hackish" integration for Google Earth ( http://code.google.com/p/google-maps-utility-library-v3/ ) I have gotten this example working and worked plenty with the Google Earth plugin and V2 of Maps. I was curious as to how to access the flyto and lookat functions onclick.
Previously you could call a function like this within an anchor link and it will flyto when clicked
function viewSouth() {
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
// Set the position values
lookAt.setLatitude(28.54626988796781);
lookAt.setLongitude(-81.37704984953177);
lookAt.setRange(1070.448301908147); //default is 0.0
lookAt.setTilt(67.84202025905072);
lookAt.setHeading(-179.9640072336487);
ge.getView().setAbstractView(lookAt);
}
This it seems doesnt work with the new integration method. Could I possibly get some quick instruction as to how to access this function withing the Maps V3/Google Earth Integration
Thanks in advance!
I was able to use the googleEarth variable which was set to equal GoogleEarth(map) and then it worked! thanks
I want to change my origin and destination (Lat and Lng) on click, this is my atual code
ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination': new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
if(sts=='OK')ren.setDirections(res);
})
I want to change this values to draw a path, for example, I click on one point, them click in another point, so it get this values and draw a path.
I have a path but only with point A and B, I want to create this points clicking on map.
Here is my test with the full code, if needed.
Add a MapsEventListenter listening for the click on the map.
The Map click event has a latLng property. Capture the first one for your start location, the second for your end address (you will probably want to add some logic to either let your user drag them or delete them if they get them wrong).
I have a google map component in my application that allows the user to draw polygons, lines, and marker. Now I want to implement a button that allows the user to export a kml file of the stuff that he/she draw in the map.
Any suggestion for the best approach to do so.
Your comments and contribution is highly appreciated
I'll summarize my idea as storing coordinates as the user draws, then when the "Output KML" button is clicked, format the saved coordinate data and place it in a textarea to be copied (unless there's a way to prompt as a download?).
Here's how I save data when the user completes a drawing element:
http://jsfiddle.net/8bwG2/
(I don't know a good way of detecting edits.)
First, add event listeners for each drawing type (line, polygon, marker), to fire when it is complete. You need a separate event listener for each type. Here's one for Polylines, and each listener will return the type of drawing element that was just completed.
google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) {
path = line.getPath();
document.getElementById("action").value += "#polyline\n";
for(var i = 0; i < path.length; i++) {
document.getElementById("action").value += path.getAt(i) + "\n";
}
});
I am placing the coordinates straight into a shared textarea but they should instead go into an array of arrays variable, with one variable for polygons, one for polylines and one for markers.
When reading from these internal variables, convert the Google Maps LatLngs to KML format long,lat,altitude. You will have to get creative with each element's name and description.
Finally, when the KML is requested, loop through the markers, line, and polygon variable to generate KML formatted elements, such as Point-coordinates, LineString, and Polygon-outerBoundaryIs
I run a search using google.maps.places.PlacesService(map) and then I place markers on the map which is fine. I do this every time the "dragend" event occurs.
But then, every time, it added on the right side of the map "Listing by yellowpages". So if I scroll 3 times, I get 3 "Listing by yellowpages". How do I remove that?
I had a similar problem using the Google Maps API. Turns out it was caused by the fact I was creating a new PlacesService object every time, and when I switched to having just the single PlacesService object, this problem went away.
So make sure you only have once PlacesService object created and linked to the map.
Show last listing-by only
lib jquery
service = new google.maps.places.PlacesService(map);
service.textSearch(request, function(request, status){
if(status==google.maps.places.PlacesServiceStatus.OK){
$('.listing-by-map').hide();
$('#map div').last().addClass('listing-by-map');
//...
}
});