I wonder if there is any plugin that lets me do this:
Click on the map, and auto generate the latitude and longitude. I have seen one somewhere, but don't know what library the site is using.
Click on the map, generate closest address. This I haven't seen before.
You can get the position with a simple click listener
google.maps.event.addListener(map, 'click', function(e) {
alert(e.latlng);
});
To get the closest address take a look at reverse Geocoding.
http://code.google.com/apis/maps/documentation/geocoding/#ReverseGeocoding
Edit: all of this is included in the basic google maps api :)
Related
Sorry for my bad English!
I have spent more than a day for web search about this, but i have not found the solution yet. Please give me a suggestion.
I'm now working with google maps api. I've got a place autocomplete sample here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
As the attached image, the place autocomplete feature works perfectly. When I enter the key word [Sydney distance education] --> click on the first suggestion --> the marker was moved to the specified place. I can get more detailed information from the marker variable.
This is the screen: http://www.imagesup.net/pt-1314056232011.png
When i click to the specified place on the map, it display a InfoWindow. I don't know which event should I need to listen to help me getting more detailed information of that place.
I have tried this
google.maps.event.addListener(map, 'click', function(event) {
alert('OK');
});
But the event is fired only when I click to another location which does not have viewport
Is is possible to add a business location marker WITH IT'S "DEFAULT" INFOWINDOW bubble like the ones in maps.google.com?
I'm making a contact page for a a company, where I have the GMaps element with a location and a marker, naturally.
Example:
Go to maps.google.com and search for "Colosseum" (for example, any "known" location/business will do). When you click the Colosseum marker, you get an infoWindow that has the business/sight/whatever info in the window (screenshot: https://dl.dropbox.com/u/1122582/colosseum.jpg)
What I want to see, is:
When I click the marker on my map on my webpage, it will open the same style (or atleast very similar) infoWindow as in the example (this means logo, address, direction links etc. whatever it has). InfoWindow being provided by the API options, and not handmade by me.
In pseudocode, I would imagine seeing it like this:
myMarker.onClick({
position: myBusinessLocation,
useDefaultInfoWindow: true
map: myMap
});
Worth noting that since coordinates are actually just coordinates and named locations, I would need to make the API understand the Marker points to a business, and not just a point in the map.
Requirements
Client-side API usage
WITHOUT the use of Google's IFRAME embedding
WITHOUT making a custom infoWindow that just looks like the one in the example. The whole point is that I would use the "default" infoWindow (if GMaps API even provides one)
There is no built-in method to create such an infoWindow with the desired content automatically.
That's the nature of an API, it has to offer the ability to create an application, but must not create an application automatically.
You have to create the infoWindow on your own by using e.g. the implemented infoWindow-object.
The contents of the infoWindow you also must collect on your own, you may retrieve the details for a place by using a Place-Details-Request
See related question: google maps custom local search / search control
I know I can create Custom Locations and Information Windows in a Google Map
e.g. http://code.google.com/apis/ajax/playground/#info_windows_sharing_v3
And I understand that Local Search can find near-by places (public ones)
e.g. http://code.google.com/apis/ajax/playground/#localsearch_with_markers
However my question is simple: how do I combine both?
How do I enable the same as the local/places search functionality but only on custom marker locations (e.g. my own location data rather than Google's places/local data)?
For example, if I have a set of custom location data/markers (not published to Google Places), how to allow the user to find a list of near by custom places relative to an address or his/her current location?
The Local Search API is deprecated, so you should probably look into moving to the Places API.
In either case, all you need to do is query the (Search or) Places API, extract LatLngs from the results and place your markers on the map.
I'm not sure what you mean with custom markers, I'd guess either (a) using each result's own icon as the marker's icon or (b) let users search among your data (markers) instead of Google's Local/Places.
(a) is kinda easy with the Places Library. In the place-search.html example you'd add just one line to the createMarker() callback function:
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
icon: place.icon,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
Original icons looks big though, so you may want to scale them down.
(b) would be a different story, like Creating a Store Locator with PHP, MySQL & Google Maps.
I am trying to figure out how i can attach a click event to a google maps v3 compass.
I have created a function that re-draws markers on a map and want this to be fired when the user click on the compass (arrows top left) of the google map.
I am working with google maps v3 and cant seem to find any way of doing this through the documentation.
Does anyone know how to do this?
Thanks in advance!
Click event of the compass is probably attached to the bounds_change event. Essentially, you are changing the bounds of the map.
You can listen to the center of the map changing:
google.maps.event.addListener(map, 'center_changed', function() {
// Call your function to redraw markers here.
});
I'm absolute newbie as for Google Map / Yahoo Map. I would like to know if it is technically possible to ask to show any city in any country DYNAMICALLY (I mean by passing parameters) and then to show some pictures OVER the map near the city ?
Thanks.
There's a multitude of ways you could accomplish this, some prettier than others.
You could use GInfoWindow to display a popup window with pictures in it at any location.
You could use one of the handy libraries offered here http://code.google.com/p/gmaps-utility-library-dev/ to assist you in displaying those images.
What I would recommend, however, is using http://econym.org.uk/gmap/ewindows.htm to create a window that is similar to GInfoWindow but that is styled by you. Just style the window so that it appears to simply be an overlaid picture.
You could choose to fool around with z-index's and manual positioning with a JavaScript library like jQuery.
Also, to answer the beginning of your question yes you can refocus the map anywhere using GMap's .setCenter() method. Documentation of setCenter(), GInfoWindow and much more available at http://code.google.com/apis/maps/documentation/reference.html
I just started learning this myself.
Here is a good link to get started:
http://code.google.com/apis/maps/
On your second question,
show some pictures OVER the map near
the city?
I like #andykram's response above, but I've implemented this previously using the Panoramio layer available for the Maps API. It can get a bit crowded but its an interface people are used to and because it is so simple to include it in a map, it just be the solution for you this time.
Just add the following to your map initialisation function.
var myLayer = new GLayer("com.panoramio.all");
map.addOverlay(myLayer);
As far as dynamically showing any city in the world in a Google Map, the solution is easily implemented - you need to geocode the name of the city. This can be done by triggering a function on an event like onclick.
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
If you hit a hurdle, try this first - http://econym.org.uk/gmap/ - possibly the best resource for the GMaps API on the web.
GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).