I am trying to visualize some fusion tables data on google maps.
I have a number of records with addresses grouped by area number.
Basically what I would want to happen is the following:
I pull data from ft
For each record, I geocode the address
and assign a custom marker according to the area number
I visualize all the different records grouped by different markers
Here is what I've done so far:
This is the query to ft:
var query = "SELECT 'Full Address' , Territory FROM " + tableid;
query = encodeURIComponent(query);
var gvizQuery = new google.visualization.Query(
'http://www.google.com/fusiontables/gvizdata?tq=' + query);
Now I want to elaborate the query data
gvizQuery.send(function(response) {
var numRows = response.getDataTable().getNumberOfRows();
// For each row in the table, create a marker
for (var i = 0; i < numRows; i++) {
var stringaddress = response.getDataTable().getValue(i, 0);
var territory = response.getDataTable().getValue(i,1);
**latlng**(stringaddress,
function(data){
console.log(data);
**createMarker**(data,territory,stringaddress);//callback
});
}
});
Here is the latlng function: that returns a google maps point from the string address
function latlng(address,callback){
var latlng;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"address": address
}, function(results,status) {
if ( status == google.maps.GeocoderStatus.OK ) {
latlng= new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
callback(latlng);
}
});
}
And finally here is the create marker function
var createMarker = function(coordinate, territory,address) {
console.log("now drawing marker for " + coordinate + "found in territory number " + territory);
var markerpath="images/icon"+territory+".png";
var marker = new google.maps.Marker({
map: map,
position: coordinate,
icon: new google.maps.MarkerImage(markerpath)
});
google.maps.event.addListener(marker, 'click', function(event) {
infoWindow.setPosition(coordinate);
infoWindow.setContent('Address: ' + address + '<br>Territory = ' + territory);
infoWindow.open(map);
});
};
The issue I am facing is that ,although I should be calling the createmarker function for each record of my ft, it is actually only being called a couple of times (out of 250) and only one territory is being represented (number 7).
What am I mising?
Thank you for your help!
The geocoder is subject to a rate limit and a quota, after about 10 geocode operations you will see the status returned of OVER_QUERY_LIMIT (which your code silently ignores). To see the issue, log the status returned:
function latlng(address,callback){
var latlng;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"address": address
}, function(results,status) {
if ( status == google.maps.GeocoderStatus.OK ) {
latlng= new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
callback(latlng);
} else {
console.log("geocode failed: "+status);
}
});
}
(or you could add an alert, which would be really annoying for 200 markers)
You need to handle the OVERY_QUERY_LIMIT appropriately (throttle your requests), but that will probably make your map load too slow.
Best option: geocode the addresses offline and store the coordinates in the FusionTable, return them in your query and use those to display the markers.
Related
I'm trying to use a combination of firebase and google maps API to create interactive markers on a map.
I can generate markers, but I want to find a way to remove them.
I generate a list of addresses that include a button you can pus. If pushed, the button removes the marker by setting setMap to null.
However, when referencing my markers in the clearItem function it give ems the error "cannot reference setMap of undefined"
Any help?
I use an array such as
var markerArray = [];
firebase.database().ref().on('value', function(snapshot)
{
var pointerLocations = document.getElementById("locations");
var databaseKeys = snapshot.val(); //Returns one object of many object attributes
var list="";
if(databaseKeys == null){
console.log("Error handled");
}
else{
for(i = 0 ; i < Object.keys(databaseKeys).length; i ++){
list += databaseKeys[Object.keys(databaseKeys)[i]].address + "<br>";
list += databaseKeys[Object.keys(databaseKeys)[i]].name + "<br>";
var keyString = Object.keys(databaseKeys)[i].toString();
list += "<button class = \"clrbtn\" id = \"clrbtn_"+i+"\" onclick = \"clearItem('"+keyString+"',"+i+")\">Delete Item</button>"
//Calls google map
codeAddress(databaseKeys[Object.keys(databaseKeys)[i]].address, map,i);
}
}
pointerLocations.innerHTML = list;
}
);
function codeAddress(address,mapGlobl,i) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == 'OK') {
// map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markers.push(marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function clearItem(databaseID,position){
firebase.database().ref(databaseID).remove();
markers[i].setMap(null);
}
EDIT: Responding to comment
Using the i variable to use an object instead of array
firebase.database().ref().on('value', function(snapshot)
{
var pointerLocations = document.getElementById("locations");
var databaseKeys = snapshot.val(); //Returns one object of many object attributes
var list="";
if(databaseKeys == null){
console.log("Error handled");
}
else{
for(i = 0 ; i < Object.keys(databaseKeys).length; i ++){
list += databaseKeys[Object.keys(databaseKeys)[i]].address + "<br>";
list += databaseKeys[Object.keys(databaseKeys)[i]].name + "<br>";
var keyString = Object.keys(databaseKeys)[i].toString();
list += "<button class = \"clrbtn\" id = \"clrbtn_"+i+"\" onclick = \"clearItem('"+keyString+"',"+i+")\">Delete Item</button>"
//Calls google map
codeAddress(databaseKeys[Object.keys(databaseKeys)[i]].address, databaseKeys[Object.keys(databaseKeys)[i]].name, map,i);
}
}
pointerLocations.innerHTML = list;
}
);
function codeAddress(address, name, mapGlobl,i) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == 'OK') {
// map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
latLongObj[i] = {lat : results[0].geometry.location.lat(), lng : results[0].geometry.location.lng(), add: address, name : name};
console.log("Placing Market at " + i);
markers['marker'+i] = marker;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function clearItem(databaseID,position){
console.log(markers);
console.log("Removing at position: "+ position);
firebase.database().ref(databaseID).remove();
markers['marker'+position].setMap(null);
delete markers['marker'+position];
console.log(markers);
}
The issue is that the geocoder.geocode() function is asynchronous. From the Google Maps JS documentation:
Accessing the Geocoding service is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request.
Your markers.push(marker); is happening inside that callback function. Since it's asynchronous, there's no guarantee when/if that will ever get called. The push() function will naively use the next available array index to add the marker to the array, but you're doing everything based on the i value you're passing around between function calls. If anything goes wrong with the Google Maps API and the callback function never gets called, or gets called after a delay (e.g. due to network latency), things may get added to the markers array out of order or with gaps in the array indices.
The simplest solution is to change markers.push(marker); to markers[i] = marker; This guarantees that it gets added to the markers array with the index you're expecting (and it matches up with the i value of that <button> element).
I have a google map which has a marker on it so people can move it around. When they do I'm attempting to reverse geocode the location into a proper address but I only really want the town/city and the country, I don't want the postcode returned
Is it possible to just get the locality without having to use a regex to remove the postcode - which would prob be difficult!
Thanks in advance
The response didn't only return the address, it also contains the address_components, an array with the specific details of the location, e.g. country, city, street etc. (see https://developers.google.com/maps/documentation/geocoding/#JSON)
fetch the desired components out of this array.
Reverse GeoCoding returns an address_components array containing few objects.
(You can print this object in console to get the feel.)
Extracting required information from this array is very easy.
Now have a look at the code -
function getLatLong(position) {
geocoder = new google.maps.Geocoder();
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// Reverse Geocoding, Location name from co-ordinates.
var latlng = new google.maps.LatLng(latitude, longitude);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var components=results[0].address_components;
for (var component=0;component<(components.length);component++){
if(components[component].types[0]=="administrative_area_level_1"){
var admin_area=components[component].long_name;
}
if(components[component].types[0]=="country"){
var country=components[component].long_name;
}
if(components[component].types[0]=="postal_code"){
var postal_code=components[component].long_name;
}
}
}
}
}
}
I think you can!
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
for (var i = 0; i < results.length; i++) {
if (results[i].types[0] === "locality") {
var city = results[i].address_components[0].short_name;
var state = results[i].address_components[2].short_name;
alert('Serial=' + i+ ' city=' + city+ ' state=' + state)
};
};
};
};
in my Asp.net Web Application where i am using the setTimeout to Get rid of
geocoder OVER_QUERY_LIMIT, the shorter time out is 10ms which is too longer for me, I have 800 above addresses coming from SQL SERVER which would be increased because of this setTimeout will take about 5 to 7 mints to take places of all the markers on map and that`s frustrating. I researched and saw this link setTimeout: how to get the shortest delay
but cant figure out what he want to do actually. please someone guide me....
function InitializeMap() {
// Here am calling the webService by PageMethods in which CityNames, Countries Name will take their places
PageMethods.GetCitiesbyUser_Extender(onSucess);
var myOptions =
{
zoom: 0,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// Creating latlngbound to bound the markers on map
var bounds = new google.maps.LatLngBounds();
//// Creating an array that will contain the addresses
var places = [];
// Creating a variable that will hold the InfoWindow object
var infowindow;
// create this to add the marker Cluster on map
mc = new MarkerClusterer(map);
var popup_content = [];
var geocoder = new google.maps.Geocoder();
// image for ballon i want to change default ballon to this
var iconimage = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png";
var markers = [];
// Create this function for passing the values which was taken by webservice cntName is the return in webservice
function onSucess(cntName){
// loop through the cntName to pass the individual City one by one from geocode
for (i = 0; i < cntName.length; ++i) {
//for fixing the issue use closure to localize the cntName[i] variable before passing into geocode and callback function within it.
(function CreateMarkAndInfo(address) {
geocoder.geocode({ 'address': address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
places[i] = results[0].geometry.location;
var marker = new google.maps.Marker({
position: places[i],
title: results[0].formatted_address,
map: map,
icon: iconimage
});
markers.push(marker);
mc.addMarker(marker);
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow afterward
infowindow.setContent(popup_content[i]);
// Tying the InfoWindow to the marker afterward
infowindow.open(map, marker);
});
// Extending the bounds object with each LatLng
bounds.extend(places[i]);
// Adjusting the map to new bounding box
map.fitBounds(bounds);
// Zoom out after fitBound
var listener = google.maps.event.addListenerOnce(map, "idle", function () {
if (map.getZoom() < 10) map.setZoom(2);
});
}
else {
// if geocode will end the limit then make delay by timer in order to avoid the OVER_QUERY_LIMIT
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function () { CreateMarkAndInfo(address); }, (15)); // here i think i should use better approch but for now it`s ok.
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
}
});
})(cntName[i]);// End closure trick
}
}
}
google.maps.event.addDomListener(window, 'load', InitializeMap);
Edit:
#just.another.programmer i cant because there is no latitute and longitude in DB, client will add cities and countries by him self thats why i had to convet city and country names by geocode and geocode doing it`s job accuretly here
How i am calling the City and country Names by web service
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod()]
public static string[] GetCitiesbyUser_Extender()
{
System.Data.DataSet dtst = new System.Data.DataSet();
string ses = HttpContext.Current.Session["UserName"].ToString();
USTER.Dal.clsSearch clssearch = new USTER.Dal.clsSearch();
// Assinging the Stroed Procedure Method to DataSet
dtst = clssearch.GetAllCitiesByUser(ses);
string[] cntName = new string[dtst.Tables[0].Rows.Count];
int i = 0;
try
{
foreach (System.Data.DataRow rdr in dtst.Tables[0].Rows)
{
// Columns Name in SQL Server Table "CityName" and "CountryName"
cntName.SetValue(rdr["CityName"].ToString() +","+ rdr["CountryName"].ToString() , i);
i++;
}
}
catch { }
finally
{
}
return cntName;
}
Geocode your addresses one time when you first get them, then store the lat/long in your db so you don't have to geocode again. This will dramatically reduce your geocode requests and remove the need for setTimeout.
I have been sifting through documentation unsuccessfully and need help. I need to access the first value in Google places autocomplete or geocode the lat lng coords I have in Google Places. I am auto populating the field with say "Palo Alto" and need Google Places' first suggestion for an auto complete of that city. I have tried using the Google Geocode feature but the results are different than the Places API and therefore useless to me. Example places outputs Palo Alto, CA and the geocode feature outputs Palo Alto, CA USA. I have tried hacking it together by reverse geocoding the lat lng splitting the string above to only say Palo Alto and populating an input field that is hooked into a Places autocomplete, but I can't get it to trigger. I have a script written to pull the output from the autocomplete results; I just need to trigger it. I have tried using $('myCity').trigger('keypress'); once I have inserted Palo Alto into the input field to no avail. All suggestions on what steps to take next are welcome. I have also looked into the following code, but I want to do it without the map and i get a javascript error when i remove it. "TypeError: a is undefined [Break On This Error] (66 out of range 46)"
var lat = -130;
var lng = 37;
var request = {
location: new google.maps.LatLng(lat, lng);
};
var service = new google.maps.places.PlacesService(map);
service.search(request, function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
console.log(results[i])
}
}
});
Thanks for your help.
You need to perform a Text Search.
Go to Places Library and go down to Text Search Requests.
Heres an example:
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
query: 'restaurant'
};
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
Note: In your case change the request to this:
var request = {
query: 'Palo Alto'
};
As per this link: http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests
The method can take either
-a point and a radius or
-a rectangle boundary
using the point + radius gives me correct results, however the max radius is only 50 km and I need my search to be up to 1000 km, so I tried using bounds.
When my bounds are small I get the same correct results as the point + radius, however when I increase the bounds I get no results at all.
The code below will give correct results, however if you replace the var sw and var ne with the commented out coordinates, it no longer works.
ie. kitchener is found within the boundary between ayr and guelph, but not in the boundary between detroit and ottawa. Which doesn't make any sense if you look at the map.
<script type="text/javascript">
var map;
var infowindow;
function initialize() {
var Cambridge = new google.maps.LatLng(43.346528, -80.417962);
var sw = new google.maps.LatLng(43.292501,-80.543175); // 41.914541,-83.282318
var ne = new google.maps.LatLng(43.605057,-80.156250); // 45.580391,-76.283051
var zoneBounds = new google.maps.LatLngBounds(sw,ne);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: Cambridge,
zoom: 10
});
var request = {
bounds: zoneBounds,
//location: Cambridge, //using location and
//radius: 500000, //radius works
name: ['Kitchener, ON']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, 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);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm supposed to be able to use PlacesServiceStatus to find the status of the request, i assume this would give me insight into the problem but I have no idea how to retrieve the status codes
Any help with this would be much appreciated
Thanks!
edit: ok, I added alert(status); and the status says it's "ZERO_RESULTS"
In the callback method you could do something like
function callback(results, status) {
window.alert(results.length);
that will tell you how many results you have, you could loop round them something like this...
for (var i = 0; i < results.length; i++) {
window.alert(results[i].formatted_address);
}
I've tried this myself and yes, if the bounds are greater than 50km then the results are pretty useless. I could guess at an answer; if the bounds are very large then it may involve too much of a hit on the Google servers. However, I don't like that answer so if someone knows better; help us out!
Another alternative is to use the Places Autocomplete -
https://developers.google.com/maps/documentation/javascript/places#places_autocomplete
You could use the geolocation but I doubt that will provide the responses you're looking for, for example if you geocode 'enfield' it will show you all the enfields in the world, if you geocode 'enf' it will show you a finish airport!