I have a online shop and people buy products and we send a products to their address , but sometimes customers enter a bad address and we couldn't find the destination.
I want to show a Google map in address form then customer locate their address on the map and finally address of that point fetched from Google map.
Is Google offers this feature?
You can also check the address against known deliverable addresses within the area. This database is maintained by the USPS, who visits (practically) every address every single weekday. Using a web-based API you could query the database and either get an automatic match or get a list of suggested matches. I know this doesn't provide you a map, but in many cases, it can allow your clients to correct their address right there on the spot and can be very easy to implement and use. Some services offer a Javascript implementation as well as an XML hook into the API. If you're googling it, look for address verification webservice, or something similar.
I work for an address verification service called smartystreets.
Yes, this service is known as reverse geocoding.
And it's actually quite simple to implement. Assuming you get lat and long values from map click event, like so:
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) {
getAddress(event.latLng);
});
}
function getAddress(location latlng) {
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
}
Take a look at reverse geocoding.Although your question is many questions in one and you should break it to smaller ones and ask them here also.
Related
I'm using google maps API to determine a building(Place) which is a Google Point of interest. I'm trying to get the place reference for future use. but due to API limitation or whatever limitation. I can't get the exact place. As an example below latitude longitude belongs to "The university of Sydney". Using this code I could derive University of Sydney but as second result and also I tried many lat long but sometime appropriate result comes in the end or first. These places are prominent to Google Places Search system. The radius of this request looks lame to me. Is there any way to retrieve the exact place ?
var pyrmont = new google.maps.LatLng(-33.88858402464521, 151.18735671043396);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 1,
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
Advanced Thanks
This is a simple 'how-to' question.
I have users in my database with their country name. I want get this country information of all the users and show it on a JavaScript Map as 'Pins' of data points. Like, for example, if I have users from Brazil, there will be a Pin on Brazil, etc.
What is the best method to do this, since I'm only looking at countries? I just saw this but I'm not sure it is the answer. Displaying a tooltip with total number of users within that country, onhover, would be a big plus.
A sample script to create the pins on the map is as below:
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"This is Australia!"
});
}
You will need to get the Lat, Lng of the center point of each country
You have various options to get the data to javascript
i. if you are using asp.net MVC, you could create an action that returns JsonResult
ii. you could use ajax to make a call to a server method and get the results.
Finally, manipulate the data in javascript by looping through the list to create the marker pins.
I'm trying to use Google geocoder service to get the coordinates of cities input by the user. However looks like there's some problem initializing the LatLng() object (latlngCity), and the map won't show up. The code is as following:
var map;
var latlngCity;
function initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': 'Lisbon, PT'}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
latlngCity = results[0].geometry.location;
}
});
var myMapOptions = {
zoom: 8,
center: latlngCity,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myMapOptions);
}
For simplicity, I'm inserting the address city string myself. Variables map and latlngCity are globals. Is there anything wrong with this code?
Thanks very much.
You need to move the map creation code into the geocode callback (or alternatively create the map with some default position and then re-center the map inside the callback).
In your code, latlngCity is undefined by the time of map creation while geocode is still being executed (asynchronously).
Hope this makes sense. Otherwise I'll provide some code. Let me know.
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 :)
According to the documentation, I found out this :
geocoder.setBaseCountryCode(countrycode);
However this did not work even if I hard codded the country code ( both cases :small-capital).
Any help?
geocoder.setBaseCountryCode() will not center the map. That will set the base country for geocoding, so that if you try to geocode 'Plymouth', it will distinguish between the UK and the Massachusetts cities.
If you want to specify the country code manually, you could use the GClientGeocoder as follows:
var country_code = "ES"; // Change the country code here
function initialize() {
if (GBrowserIsCompatible()) {
var map = null;
var geocoder = null;
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
if (geocoder) {
geocoder.getLatLng(
"Country: " + country_code,
function(point) {
if (point) {
map.setCenter(point, 13);
}
}
);
}
}
}
There is no need to use set the setBaseCountryCode() in this case, because country codes are obviously unique.
If you are using version 3 of the Google Maps API, you may want to use the google.loader.ClientLocation to center the map automatically to the client's country as in this Google Demo. This uses the IP address of the client to determine the country.
The code would look something like this:
function initialize() {
// Initialize default values
var zoom = 3;
var latlng = new google.maps.LatLng(37.4419, -100.1419);
// If ClientLocation was filled in by the loader, use that info instead
if (google.loader.ClientLocation) {
zoom = 13;
latlng = new google.maps.LatLng( google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude);
}
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
Note that geolocation from IP addresses is not a very reliable science. You will be getting the location of your ISP, which can be quite far away, and in addition the IP-to-location databases aren't always up to date with the latest changes, so you might not have any data for a particular IP address. However since you would be checking for just the country, the margin of error would be quite small.
Just in case if you are looking for SQL file which has ISO country codes (both 2 and 3 chars), then you might also want to look # http://27.org/isocountrylist/
Get information from this Country database.
Pick the capital-city of the required country and center the map around that.