I have an old gmaps application using V2 and I am trying to update it to v3.
I have a really simple problem, but I can't find a solution yet.
How can I strip the latitude and the longitude from the "event.latLng"?
It is returning a point(), but I need only the lat alone and the long for itself.
I cant get this to work.
According to the API for MouseEvents, event.latLng contains a LatLng, not a Point. If this is the case then you can use the lat() and lng() methods to get the values separately. If event.latLng is actually a Point then you can directly access the coordinates using the x and y properties (not methods).
What type of listener is creating the event?
Edit: there's an example in the tutorial of how to do what you want. It looks like you're following this already. Did you remember to include the actual placeMarker() function declaration?
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
Or are you not interested in placing a marker, and just want to get the lat and lng values? In that case, all you need is:
google.maps.event.addListener(map, 'click', function(event) {
var myLatLng = event.latLng;
var lat = myLatLng.lat();
var lng = myLatLng.lng();
})
Related
I'm new in GoogleMaps API v3, I have speficied a bounds in my geocoder config, with this code:
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(-27.242171228168928, -27.242171228168928),
new google.maps.LatLng(-26.99771082240342, -109.0823670364868))
Now, the search are more accurately :-) But, now I want to display an alert if user drags the marker out of THAT bounds specified. How I can achieve that?
In short, I want to prevent the user place the marker outside the region
So you want to have an event listener for when the marker is dragged, using the bounds' contains function. Also if you really want to prevent them dragging that marker outside of the bounds, you probably also need to keep track of what the position was originally, and reset it back there if you have to. Something like this:
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-27.242171228168928, -27.242171228168928),
new google.maps.LatLng(-26.99771082240342, -109.0823670364868));
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.5087531, -0.1281153),
draggable: true
});
var markerPosition;
marker.addListener('dragstart', function() {
markerPosition = this.getPosition();
});
marker.addListener('dragend', function() {
if (bounds.contains(this.getPosition()) == false) {
alert("You've dragged the marker outside of the bounds allowed. We've reset it");
this.setPosition(markerPosition);
}
});
PS: I've also extended this answer into a blog post, including how to do the same with a polygon as well as bounds.
On a LatLngBounds object you can call the contains() function which takes a LatLng parameter and returns true\false if its contained with the LatLngBounds you have defined.
So in your case you can listen to the dragend event on your marker and in the listener handler use the approach above.
I want to draw marker on google maps. The marker data is from JSON.(from json file, not from database) and all data have a geometry (latitude, longitude)
An important thing is when I drag google maps, the browser will show some boundary.
And then the markers have to show on only shown maps.
After drag map again, the marker resets and show new marker in new boundary.
google.maps.event.addListener(map, 'dragend', function(event) {
var bd = map.getBounds();
var ne = bd.getNorthEast();
var sw = bd.getSouthWest();
var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
I can not progress any more..
Please give some example url or help..
So you've got the points for the 4 corners of some kind of boundary, and you want to put a marker in there. So you have a bunch of markers, but you only want to plot the ones that fall within the current bounds.
So something like this might work:
var latlng = new google.maps.LatLng(54.42838,-2.9623);
var marker = new google.maps.Marker({
position: latlng,
});
if (bd.contains(latlng)) {
marker.setMap(map);
}
You might want to setMap(null) for any markers that fall outwith the bounds.
I am trying to build web app where you input your address and it will give you list of bus stops in your area. I want to use Google Maps for this, but i can't find the way to use them for this. Is there any way to get list of points on maps in, lets say, JSON or XML format? I tried Google Maps Places API, but it didn't work this way. Only thing i found is this example - http://gmaps-samples-v3.googlecode.com/svn/trunk/localsearch/places.html but thats not what i need.
So, anyone knows?
The Google Places API does have stop information on there but you need to form your query very specifically to make it work.
The key is using the nearby search with rankby=distance and radius= and types=bus_station
The default rankby prominence rarely shows bus stations.
Sample query:
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=49.89458,-97.14137&sensor=true&key=your_key&rankby=distance&types=bus_station
I think it can help you
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var infowindow;
function initMap() {
var pyrmont = {lat: 38.06908229560463, lng: 46.31730562744135};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 1000,
types: ['bus_station','transit_station']
}, callback);
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
</script>
Ali Seify's answer is correct except that the API document states that only the first element in the types parameter will be used by the API and the transit_station type is the correct type for bus stop.
Also, in order to get the nearest bus stop, suggest to use parameter rankBy: google.maps.places.RankBy.DISTANCE and radius parameter cannot be used in this case.
service.nearbySearch({
location: pyrmont,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['transit_station']
}, callback);
This is not a service that Google provides. They surely have all of the stuff you need on record, but they do all of their calculations internally.
One option (which might be a bit difficult) is to mine public transportation schedules for their bus stop locations. It might be an option if you have a small region (ie. a city) that your web app is to support. It's risky because if the pages change then you'll have to reconfigure the data mining application, but you'd still have the same problem trying to mine the data from Google (or somewhere else) - if you could find a way to get a bus stop list with locations and built your app around it, it could change at any time and break your application.
You could use Google Fusion Tables for this. You would have to enter the data yourself though, unless someone else already have entered it. Google maps API supports Google Fusion Tables.
I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)
I used this code but its not working.
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(10.35,79.4167), 13);
var marker = new GMarker(new GLatLng(10.35,79.4167));
map.setCenter(new GLatLng(8.7167,77.483), 14);
var marker = new GMarker(new GLatLng(8.7167,77.483));
map.setCenter(new GLatLng(21.83,78.75), 15);
var marker = new GMarker(new GLatLng(21.83,78.75));
map.addOverlay(marker);
map.setUIToDefault();
}
}
Your code will only add the last marker. You are only calling addOverlay once at the end (so only the last marker will be added to the map).
You also call setCenter multiple times, so only the last setCenter will be applied to the map. setCenter just sets the visible area on the Google Map.
You are using Google Maps v2 in your code, I suggest you check out the more current v3 API. If you are starting a new project, you may as well use the latest stuff.
If you have some other reason for using the v2 API, there is a range of good samples to get you started.