Google Map s not working when using json data - javascript

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

Related

Inserting PHP variables in jQuery

So I found this Pie Chart that I would like to use on my website (http://canvasjs.com/docs/charts/chart-types/html5-pie-chart/)
I've already adapted the code to where it establishes a connection to the MySQL database gets the information I need from and I've saved those as variables in PHP and displays them within the Pi chart. So far so good!
Now I've really like to make this a little bit more real-time as the information changes quite rapidly, so I was thinking, of having the jQuery update its information on a regular basis. Preferably every 1000ms or so. How would I go about achieving this?
Thanks for your suggestions!
Basically you will need to establish an ajax data flow:
your main page will contain only the graph, but skip the data
request the data by sending an ajax request to a separate page
the data page should return your data object in JSON format (use json_encode())
With periodicalupdater you can update your data in the interval of your choice and automatically adjust this interval to reduce the load on your server.
There's a worked example in the documentation: http://canvasjs.com/docs/charts/how-to/live-updating-javascript-charts-json-api-ajax/
Basically, you need to use JavaScript and more specifically Ajax to query the server continuously and fetch new data in JSON format. Then update the chart using the brilliantly named 'updateChart' method. :)

About Google Analytics collect data

First of all, Hi to all of you (I'm new here).
I'm having a look on how Google Analytics works as I'm gonna develop a similar tracking js to collect all the data I need for my websites and, as far as I can see, the ga.js script send all the data (maybe not all but a good part of it) with a get request with a 1x1 gif and all the parameters following.
Seen here: How does google analytics collect its data?
So, on the server side It seems the only way to "read" all these parameters is going to analyze server logging and then collect everything on my database?
Is this the best option to get users data?
I think, server logging could "switch file" every 2 hours so you can analyze that file of the past 2 hours and show "not that old" data to your graph!
Of course will never be "realtime" graph but a 2 hours delay could be acceptable, I think.
I think you can simply put a script (PHP for example) at the image path, then through the script return as a response the image, by doing this you can act in real time, since using a script you can get all the data that would be present in your server log.
If you want to try my solution I think a good point to start (in PHP) would be this to create the GIF image and then you can use data located in $_SERVER to start gathering data!

Google Map, use MarkerClusterer with FusionTables data

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

Dynamically loading external data from database into d3.js

I am trying to get dynamic reloading to work in d3 and I'm having trouble trying to figure out how to refresh the data from the database.
I have an array that contains values should change every second:
var data = [1,2,3,4];
In my initial script, I had PHP pull the data from the database to set up the array, and reloading the page works fine for that, but I'd like to use d3's reload functionality to fetch new data and redraw the diagram.
I'm completely new to js and d3, so any suggestions would be very helpful.
I tried using jQuery's get command to call an external PHP script that outputs the values but that doesn't seem to work.
I'm basically trying to replicate the bar chart from Google Analytics real time display.
firstly, you need a page on the server that will output the data in JSON format*. Once you have that page, call it from the browser, and you should get the encoded data appearing on screen (this will prove that the page is hosted properly and returning data)
Next, follow the simple example on the D3 docs link that Yeco posted. You'll need to replace the dummy URL with the address to your new data page, and stick your own function call in there to redraw the chart with the new data.
*Note: I am not familiar with PHP, but it should have either a native JSON encoder, or a library will be available on the net. You'll also need to make sure you set the response mime type appropriately - a quick google should give you the correct mime type - it's something like 'application/json' I think, but can't remember of the top of my head
This might help you: https://github.com/d3/d3-request/blob/master/README.md#request
Edit: updated link to API v4

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