Google Map Markers DataTable with Local Data 2d Array
Google Map Markers DataTable with Local Data 2d Array
JamesCanada
Posts: 4Questions: 0Answers: 0
Hi, I am building a fairly simple, client side only, jQuery, Google Maps web page, using V3 of the Google Maps API. Here is the scenario:
1) A bunch of buttons at the bottom of the map, each for a sport or Point of Interest. For Example GOLF.
2) Click the golf button and 25 golf course icons populate the map. The data is held in a 2D JavaScript Array. The infoWindow content comes from the DOM.
3) In the sidebar is a list of the markers, click either the map or the list and the selection is highlighted. A sample app using Google Maps V2 API is here.
Here is the question/problem. Instead of a list of links, I would rather use a DataTable, so the user can play with the data, then pick the row, which will also select the marker on the map. I would like to use one JavaScript 2D array for both the markers and the aaData source. But some of the data in the array is not of type string, it is either a Google Map object or a variable name.
Do all items in the aaData source have to be strings? A simple workaround would be to have two arrays, one for the marker data and one for the DataTable data, but this seems wrong.
If anyone likes playing with maps, UI, jQuery and simple data, I like working on this stuff.
Cheers James
1) A bunch of buttons at the bottom of the map, each for a sport or Point of Interest. For Example GOLF.
2) Click the golf button and 25 golf course icons populate the map. The data is held in a 2D JavaScript Array. The infoWindow content comes from the DOM.
3) In the sidebar is a list of the markers, click either the map or the list and the selection is highlighted. A sample app using Google Maps V2 API is here.
Here is the question/problem. Instead of a list of links, I would rather use a DataTable, so the user can play with the data, then pick the row, which will also select the marker on the map. I would like to use one JavaScript 2D array for both the markers and the aaData source. But some of the data in the array is not of type string, it is either a Google Map object or a variable name.
Do all items in the aaData source have to be strings? A simple workaround would be to have two arrays, one for the marker data and one for the DataTable data, but this seems wrong.
If anyone likes playing with maps, UI, jQuery and simple data, I like working on this stuff.
Cheers James
This discussion has been closed.
Replies
There are thousands of markers to show and I use the marker manager to hold the icons.
The API of Google Map v2 is not very good, perhaps v3 sucks the same. I've got to use a duplicated array for DataTable data source.
Sounds like an interesting project! Perhaps you could post a link when you get it going? :-)
To be honest I had never anticipated the 2D data array being given to DataTables having objects nested in it. What I expect will happen if you do that is that the browser will print "[object Object]" into the table where you've got that object. What you could do is simply make that column hidden (bVisible).
The other option, as you say is to have a second array (or rather pre-process your "complete" array into an array suitable for your table) for DataTables.
Regards,
Allan
http://wasalakeresort.com/indextab.htm
The button of interest today is GOLFING under the THINGS TO DO tab (most of the site is empty while I work on the marker table interaction)
The normal to make the markers array is: (src="_Scripts/wasaMapMarkers.js")
golf[0] = [new G.LatLng(49.631360, -115.946749), "Bootleg Gap Golf", iconGolf];
golf[1] = [new G.LatLng(50.505851, -115.996981), "Copper Point Golf Club", iconGolf];
golf[2] = [new G.LatLng(49.509021, -115.743445), "Cranbrook Golf Course", iconGolf];
I made a temp array with quotes around the objects just to test the code so far. Also I disabled the map markers. I will play with this more today.
Cheers James
Very nice - thanks for the link :-)
Allan
The golf array appears to be golf spots :)
In my application, the data are pulled from a database, in which the Lat and Lng are separately stored in two columns, like the following:
[code]
//ID, Lat, Lng, Title, Type, OwnerID
var p = [
[18, 49.91823, -113.00823, "Holly place", "H", 13],
[21, 49.18232, -113.11292, "Dinner hall", "H", 19]
];
[/code]
The pulled data form an array, which is used to initialize the DataTables and generate GMarkers which are pushed into the GMarkerManager. Hundreds of GMarkers are displayed on screen after the page is loaded.
When the user clicks an item on the table, the triggered event simply moves the center of the map, onto the coordinate of the corresponding record. The destination point, GLatLng, is constructed from the Lat column and the Lng column when the record is clicked.
I think a separated array like this also meets your requirements.