Marker Clustering - Fusion Table Layer - Google Maps v3 - google-maps

Is there a way to get marker clustering (ie makerclusterer) to work with a Fusion Table layer? It seems that you have to assign markers to markerclusterer yet when using a fusion table layer, Google is handling the markers/infowindows? Still trying to figure this fusion table thing out.
Basically looking for a way to cluster large amounts of markers being provided via a Fusion Table

Fusion Table Layers render an additional png image for each tile that gets overlaid on top of the map tile, containing the data points for that tile, this is the server side rendering part. So it's multiple data points per tile that contains data points.
Generating your own markers from data, which is necessary for MarkerClusterer, doesn't overlay an image per tile, it creates an individual Marker on the map for each data point and overlays a sprite image on to that.
Based on this, it is not possible to use MarkerClusterer and a FusionTablesLayer.

This is my own code. I was trying the technique in the earlier link but it didn't work for me. So this is how i did it.
First i queried the fusion table with the regular chart api query
function initialize() {
mapMain = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -100.1),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
mc = new MarkerClusterer(mapMain);
var queryText = encodeURIComponent("select wikipedia_article, xy from "+tableid);
var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq="+queryText);
query.send(handleQueryResponse);
}
Next, in my handleQueryResponse, I dynamically created markers and added it to the Mapclusterer
function handleQueryResponse(response){
dataTable = response.getDataTable();
for(var i=0; i< dataTable.getNumberOfRows();i++){
var hrefval = dataTable.getValue(i,0).toString();
var arr = dataTable.getValue(i,1).toString().split(" ");
var latlng = new google.maps.LatLng(arr[0], arr[1]);
var marker = new google.maps.Marker({
position: latlng,
map:mapMain
});
fn = markerClick(i, marker);
google.maps.event.addListener(marker,'click', fn);
markers.push(marker);
}
mc.addMarkers(markers);
}
In this case, the main map, the array of markers (mc in the code below) are global variables. You can see the full working example here.

I don't think you will get it work with a fusion table. IMO the fusion table is lacking the support for a spatial index. A si helps reduce the 2d complexity to a 1d complexity. It's uses in a lot of applications like heatmaps, treemaps, post code search, maps application. You want to look for Nick's hilbert curve spatial index quadtree blog.

Fusion Tables allows you to view thousands of points at once by using server side rendering (from the google servers). Marker Clusterer solves the problem by building a set of clusters from nearest points (from the clients browser). I wouldn't necessarily use them both at the same time, but it might work for your use case it's up to you.
You can read more information about how they work here:
http://code.google.com/apis/maps/articles/toomanymarkers.html
If you really wanted too you could use the Fusion Tables API to feed the data from Fusion Tables to the Marker Clusterer.
Hope this helps.

Related

Googlemaps with multiple markers and a list of the locations pointing to the markers

I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/

Polygon with large XML set of points

I have a map that I built 4 years ago with API v2. I'm now trying to upgrade it to API v3, but all I get is the infamous blank gray box where the map should be. I have done console.log all over the place and all the data and variables look correct to me, but I am not a Google Maps expert.
Here is the map in it's current broken state:
https://www.idahopower.com/AboutUs/serviceMap/
The map is supposed to show 4 shaded polygons representing my company's service area divided into regions. The points that make up the polygon borders come from a large XML file (1573 lines) on my server, which is here:
https://www.idahopower.com/AboutUs/serviceMap/serviceMap.xml
I am not sure if I am doing this in the best way, but I am using XMLHttpRequest() to load the XML data.
This was all working with API v2. Any help would be appreciated!
This will not initialize the map correctly (center and zoom are required MapOptions):
// Create map object
//
var map = new google.maps.Map(document.getElementById("map"));
from the documentation
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
working example, your code with center and zoom set
There is nothing wrong with your Polygon, you didn't set the required options zoom and center for the map.
Related to the XML: 1500 vertices isn't that much, but when you want to improve the performance you may send the data as JSON(it should reduce the amount of data to the half)

Need tips on data structure/model design regarding Google Maps Marker objects

I am working on a prototype bike parking map for my school using Google Maps API.
I have saved all the bike rack locations in MYSQL with only attributes being lattitude
and longitude of the location. Now I'm trying to add a feature where when the users click
on the markers, they would show the pictures of the corresponding bike racks.
I am trying to do this using InfoWindow object.
Now the problem is, although InfoWindow is almost exclusively used with Markers, a Marker object cannot have an InfoWindow object as one of its properties/attributes.
So I was thinking creating a fresh new InfoWindow every time users click on markers. But i feel like it's going to create some lagging.
Another option I had in mind was creating another table or a column in the current table
which contains all the InfoWindow object.
However, I really want to make the InfoWindow objects to be part of Marker objects because
intuitively it makes the most sense.
Not saying the best way to do it is this, but a marker object sure can have an infoWindow as one of it's properties! Google's API doesn't restrict/throw errors when you put random properties/methods on it's marker objects. The following is perfectly valid code:
var someMarker = new google.maps.Marker(properties);
someMarker.infoWindow = new google.maps.InfoWindow(properties);
someMarker.infoWindow.setMap(map);
someMarker.infoWindow.open();
That being said, on a lot of google maps implantations there's generally only a single infoWindow object on the map. The reason for this if you opened up 4 or 5 infoWindows in a single map view, they tend to clutter up the map and you can't see any of the base map tiles anymore.
For that reason, you can have a single infoWindow object, and just change the contents of it, depending on which marker is clicked:
var yourGlobalInfoWindow = new google.map.InfoWindow(properties);
var someMarkerA = new google.maps.Marker(properties);
var someMarkerB = new google.maps.Marker(properties);
someMarkerA.infoWindowContent = 'some A HTML content here';
someMarkerB.infoWindowContent = 'some B HTML content here';
google.maps.event.addListener(someMarkerA,'click',function() { yourGlobalInfoWindow.setContent(someMarkerA.infoWindowContent); });
google.maps.event.addListener(someMarkerB,'click',function() { yourGlobalInfoWindow.setContent(someMarkerB.infoWindowContent); });
Note that the code above is for illustrative purposes only and is far from optimized or elegant, but it gets the point across.

how to get all markers on google-maps-v3

Is there a way to get all the markers on Google Maps?
If you mean "how can I get a reference to all markers on a given map" - then I think the answer is "Sorry, you have to do it yourself". I don't think there is any handy "maps.getMarkers()" type function: you have to keep your own references as the points are created:
var allMarkers = [];
....
// Create some markers
for(var i = 0; i < 10; i++) {
var marker = new google.maps.Marker({...});
allMarkers.push(marker);
}
...
Then you can loop over the allMarkers array to and do whatever you need to do.
The one way found is to use the geoXML3 library which is suitable for usage along with KML processor Version 3 of the Google Maps JavaScript API.
I'm assuming you have multiple markers that you wish to display on a google map.
The solution is two parts, one to create and populate an array containing all the details of the markers, then a second to loop through all entries in the array to create each marker.
Not know what environment you're using, it's a little difficult to provide specific help.
My best advice is to take a look at this article & accepted answer to understand the principals of creating a map with multiple markers:
Display multiple markers on a map with their own info windows
If you are using JQuery Google map plug-in then below code will work for you -
var markers = $('#map_canvas').gmap('get','markers');
For an specific cluster use:
getMarkers() Gets the array of markers in the clusterer.
For all the markers in the map use:
getTotalMarkers() Gets the array of markers in the clusterer.
Google Maps API v3:
I initialized Google Map and added markers to it. Later, I wanted to retrieve all markers and did it simply by accessing the map property "markers".
var map = new GMaps({
div: '#map',
lat: 40.730610,
lng: -73.935242,
});
var myMarkers = map.markers;
You can loop over it and access all Marker methods listed at Google Maps Reference.

Marking streets in Google Maps

I want to create an overlay on top of Google Maps that displays different streets in different colors.
In the Google Maps API it is possible to create markers and polygons that cover certain areas.
Is there a way to somehow mark different streets?
It sounds to me like you are interested in showing some application specific coloring for your Google maps display (rather than traffic maps).
If so , then you should check out custom overlays. You can create your own transparent background overlay tiles (with your colored streets), match them up with the Google maps tiles and then overlay them on the map. You can find a description of this stuff in the Maps API reference - Overlays.
I have actually been interested in trying this out, and this question might be a good excuse. I'll let you know how I go.
Edit: Ok, I tried this and it was pretty straightforward. You just need to grab the tiles images when the google maps page load (for the area you would like to overlay). Make sure you keep track of the origional urls, because these have the x,y coordinates that you will need to write your tile overlay method.
Edit the tiles with your colored roads then upload them to your web server. Add the following code to use your overlay on the regular map:
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,'©2007 Google'));
// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer = new GTileLayer(myCopyright);
// properties of the tile I based my tile on
// v=w2.97&hl=en&x=38598&s=&y=49259&z=17&s=Galil.png
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/times_square.png";
};
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.75740, -73.98590), 17);
map.addOverlay(myTileLayer)
This code overlays my Thing eats NY tile:
at x = 38598 and y = 49259 at zoom level 17.
It is possible to create markers and polygons in the Google Maps API. You need to create GPolygon and/or GPolyline objects
Have a look to these tutorials
And if you want to obtain the coordinate (latitude, longitude) of certain streets, you may have a look to the source code of this page
I am not sure to fully understand your question: do you want to mark some given streets ?
in that case, a quick-and-dirty way could be to get the coordinates of all the addresses of the street and build a GPolygon according to them...
Have you concidered using OpenStreeMaps?
Try digging into the code used to show the traffic overlay on the normal Google Maps site.
Edit: I just looked at the code, and it appears that even Google decided it was easier to implement this by just generating the traffic lines on the server and pulling them down as transparent PNG overlays.
I just found this link, and I think this could interest you. It is a JavaScript package that provides functionality for displaying multiple routes on Google Maps.
Is it what you were looking for ??