Google Map, use MarkerClusterer with FusionTables data - javascript

I'm trying to make a map with Google Map API and MarkerClusterer. It's works perfect with a simple JSON file (like this http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html).
But I would use Fusion Tables (simple to edit/add/del markers): http://www.google.com/drive/apps.html#fusiontables.
Is it possible ?

Of course you can. You may request FusionTable-data via the FusionTables-API. This may be done on serverside, but also via AJAX(the API supports JSONP). Once you got the data the workflow will be similar to the JSON-example in your question.
working example

Related

Get address from coordinates with react-leaflet

Using react-leaflet, I want to get the location address information from coordinates.
I found a working example of a similar behavior: here
However it seems it doesn't work with my version of react-leaflet. Also I don't even need it to work with onClick events, just get the address on page load so i can populate a form field.
Any push in the right direction would be most helpful.
You are looking after a reverse geocoding service. You can start by looking into Nominatim it is free and it is what they use in the example. However remember to read the usage policy, it is not meant for heavy use. If you know that you will make a lot i requests each second you should look for a paid alternative.
Would recommend to build your own service that can take coordinates and pass that to the api, relaying on a package. e.g.
I have a graphql query hook that I pass latLng that I get from leaflet -> pass it through my backend -> Nominatim.
const { data, fetching, error } = useReverseGeo(latLng);

Building a Query URL for Places API in Google Maps Javascript API

I am trying to use Places API by using an URL but I couldn't find any ways to build a query string for Places API on Google's documentation. (which can be found here)
Using the API key is not a problem, I just need to get the results which I get from nearbySearch by using a URL and fetch method in Javascript.
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
Is there any way that I can build a query string to retrieve json data for Places API?
Thanks in advance.
Interestingly the base url is not showed on the URL page, it's actually in this page. Any request can be done with the urls in that page.

Google Map s not working when using json data

I'm making a web app. I integrate GMap to know my client position. When I use it with manual number, the code is working. But when I use JSON data, the code is not working. The browser always run and my page can't right click.
This is my code.
You should parseInt('value') per lat and lng after separated them from json data

Problems retrieving Fusion Tables data - Google Maps API

I'm developing an JSP application that retrieves a lot of polygons to show on the map.
I will try explain how the application works before tell my problem.
My client needs to check on Google Maps his internal division of territories (a territory is a set of cities, it's a many-to-many association). The territory-city relationship can be changed anytime by loading a file via an application menu. Today we have 35 territories and about 10000 associations territory-city in the system.
I have the polygons with the shape of the cities in Fusion Tables, but when I try to retrieve the shapes, I get the following error:
Code to load the polygons for one territory:
layer = new google.maps.FusionTablesLayer({
query:{
select: 'geometry',
from: {MYKEY},
where: "NAME_CITY IN ("+listOfCities+")"
}
});
Error:
Failed to load resource: the server responded with a status of 414 (Request-URI Too Large)
I'm looking for a way to load these territories from a long time, I already tried to read the KML files from Java, and send the set of coordinates for each city, but the HTML page was like 300MB when done, and it just froze the browser and didn't work. So the Fusion Tables seemed to be the best approach.
I found out a few posts where people were telling to use the POST method to request the data, because of the size of the listOfCities variable(some territories have about 500 cities associated), but they never said how to do it using the Google Maps API.
How can I do that? Anybody have another approach to solve this problem?
Thanks
You must somehow simplify the query. POST is not an option, there is no way to change the method used for the query.
But this could be a point where you can start:
The territory-city relationship can be changed anytime by loading a file via an application menu.
Instead of filtering the cities on your server and query cities, you may add another column to the table, where you store the "relationship", as suggested by geocodezip.
This may be done automatically when "the file" is uploaded(and here you can use POST)
The new where-clause would be simple and short now like e.g.: territory=35

Show a route on a map

How can i show the following result:
http://maps.googleapis.com/maps/api/directions/json?origin=hadera&destination=haifa&sensor=false
on a map? i want to see the entire route!
please: no use of google's javascript API. just the Web Service
I assume you want to show the route on a Google Map, which is mandatory ;)
You can do this without using the JavaScript API, just use the Static Maps API with the path parameter containing the encoded polyline you'll find in the overview_polyline field of the route of your choice.
Example using the first route (that is, response.routes[0].overview_polyline.points) from your sample request:
"overview_polyline" : {
"points" : "en_eEsoctEa#IuAvHzD~#hGrA~D~#i#vCgAlGa#|BqFp[kBOyBAgADk#Hw#JqBb#cIjAcC`#{Cr#iKrC_Bh#kDhAeCx#}Bn#}IpCcFtAq#Hs#D_A?yAEoAQi#OcA]kAg#}OoKmMqIkCgBoBgA}D{Bm#]ERiAxGoA`IYtAs#hCwAzDsB`EoDhGkDrGkBbDmBbD_CrC{#`AcAn#c#Pm#JUDa#?u#Cq#Mo#Um#c#cC}BmGgGgc#yd#qSmTsNiOwDoDqCmBkCuAcA]oC_AyCw#}Bc#_BO{BOwE#aDNiBRyARyBd#_K|Cag#bPsVdImDhAkBf#qCf#_AJqADeABcBCuAIqC_#kIqAuLaBgNmBuImAqFs#kL_BsEq#qEk#eGo#aFUqEIoOSiLI_DAgQQuDIiEa#u\\iDwBOiGw#yB_#uCy#yPsEaIwBiL_D{Cu#sAUgDk#uCYgAIeBCoEAax#nAgC#qCGcBIeCWmKmAmOaBkH_AqCc#}Aa#{CaAaBs#}BiAwMyGoAk#kBcAqHqDcBs#kC}#_D_AwCu#_BUgC[eDSeFIs#A{BFs`AtA_HH}CAoCIwBMsH]sMm#iMm#wG]qDYiFm#eFw#iCg#{Cs#cFsAwI}BqJgC{C{#cKmCuLaDuXmHwT_GuCu#sBc#wGkAqB[kDa#gE]eDQeGO{CCmC#}CFmCHcG\\yLx#wN`AcEXkETyDHiH#_DGgEO_F]sFi#oNuAgP_BwWgCsO{AuCa#eCe#eBa#wBm#uCaA}EwBwBiAaCyAsAaAyDcDoN_NmWqVgA_AiDeCwD_CyAy#wD_BeEyAsBk#kDs#uB]_CYyCU{AIyFOyCGyTW{SYiEEsJQ}ECyA#mDLyFVoCVyBZyCd#aDv#kDdAkA^gAh#qDrAsLtFmInDoBt#oAd#eATcG`AmCLo#Ds#?oCEeAG{lB_VaM{AyGs#aHYuISeB?gHMiLYyJe#gO{AwCUwGs#yf#_FaFc#u#KqI{#{Iy#wEa#{De#gO{AqC]mHk#gEOoPUoOQ_S[kKOmBIkBWs#Q}#[}#e#eAy#{AkBoAgBqDmHi#eAs#_Ae#e#sAaAcAm#_Ac#}#U_AM_BK}BM]#eCEyBJaALs#LsA\\_Bv#{BlAiBhAyAx#{Ap#wCtAaFjC_CfAwBv#cB\\kDt#_LnBwJbBmEb#gJp#M#{BLcD`#cDX}E`#_CLuBCcEWmKk#{Dg#cCYaEgAqCoAoBwAcCgC}EmGg#m#gDkEuE{FiBwBoBsCkAwB}#wBo#gCa#sCMqAMoD#uIBkDFuQ#qDBy#"
},
Resulting map:
Full request, requires URL-encoding the encoded polyline:
http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=400x400&path=weight:3%7Ccolor:red%7Cenc:en_eEsoctEa%40IuAvHzD~%40hGrA~D~%40i%40vCgAlGa%40%7CBqFp%5BkBOyBAgADk%40Hw%40JqBb%40cIjAcC%60%40%7BCr%40iKrC_Bh%40kDhAeCx%40%7DBn%40%7DIpCcFtAq%40Hs%40D_A%3FyAEoAQi%40OcA%5DkAg%40%7DOoKmMqIkCgBoBgA%7DD%7BBm%40%5DERiAxGoA%60IYtAs%40hCwAzDsB%60EoDhGkDrGkBbDmBbD_CrC%7B%40%60AcAn%40c%40Pm%40JUDa%40%3Fu%40Cq%40Mo%40Um%40c%40cC%7DBmGgGgc%40yd%40qSmTsNiOwDoDqCmBkCuAcA%5DoC_AyCw%40%7DBc%40_BO%7BBOwE%40aDNiBRyARyBd%40_K%7CCag%40bPsVdImDhAkBf%40qCf%40_AJqADeABcBCuAIqC_%40kIqAuLaBgNmBuImAqFs%40kL_BsEq%40qEk%40eGo%40aFUqEIoOSiLI_DAgQQuDIiEa%40u%5CiDwBOiGw%40yB_%40uCy%40yPsEaIwBiL_D%7BCu%40sAUgDk%40uCYgAIeBCoEAax%40nAgC%40qCGcBIeCWmKmAmOaBkH_AqCc%40%7DAa%40%7BCaAaBs%40%7DBiAwMyGoAk%40kBcAqHqDcBs%40kC%7D%40_D_AwCu%40_BUgC%5BeDSeFIs%40A%7BBFs%60AtA_HH%7DCAoCIwBMsH%5DsMm%40iMm%40wG%5DqDYiFm%40eFw%40iCg%40%7BCs%40cFsAwI%7DBqJgC%7BC%7B%40cKmCuLaDuXmHwT_GuCu%40sBc%40wGkAqB%5BkDa%40gE%5DeDQeGO%7BCCmC%40%7DCFmCHcG%5CyLx%40wN%60AcEXkETyDHiH%40_DGgEO_F%5DsFi%40oNuAgP_BwWgCsO%7BAuCa%40eCe%40eBa%40wBm%40uCaA%7DEwBwBiAaCyAsAaAyDcDoN_NmWqVgA_AiDeCwD_CyAy%40wD_BeEyAsBk%40kDs%40uB%5D_CYyCU%7BAIyFOyCGyTW%7BSYiEEsJQ%7DECyA%40mDLyFVoCVyBZyCd%40aDv%40kDdAkA%5EgAh%40qDrAsLtFmInDoBt%40oAd%40eATcG%60AmCLo%40Ds%40%3FoCEeAG%7BlB_VaM%7BAyGs%40aHYuISeB%3FgHMiLYyJe%40gO%7BAwCUwGs%40yf%40_FaFc%40u%40KqI%7B%40%7BIy%40wEa%40%7BDe%40gO%7BAqC%5DmHk%40gEOoPUoOQ_S%5BkKOmBIkBWs%40Q%7D%40%5B%7D%40e%40eAy%40%7BAkBoAgBqDmHi%40eAs%40_Ae%40e%40sAaAcAm%40_Ac%40%7D%40U_AM_BK%7DBM%5D%40eCEyBJaALs%40LsA%5C_Bv%40%7BBlAiBhAyAx%40%7BAp%40wCtAaFjC_CfAwBv%40cB%5CkDt%40_LnBwJbBmEb%40gJp%40M%40%7BBLcD%60%40cDX%7DE%60%40_CLuBCcEWmKk%40%7BDg%40cCYaEgAqCoAoBwAcCgC%7DEmGg%40m%40gDkEuE%7BFiBwBoBsCkAwB%7D%40wBo%40gCa%40sCMqAMoD%40uIBkDFuQ%40qDBy%40
how about google's support for embedding?
or how to add google maps to your website
the easiest way to use it is go to actual google maps and use the link button, then use the link in your site/whatever

Categories

Resources