Google Maps Api marker in layers - google-maps

I'm doing a project with Google Maps Api v3. I am wanting to carry a full list of points that will have restaurants, and wanted to somehow allow the user to select the type of restaurant, showing and hiding as the type.
This is possible with layers, or is it more correct, I clear all points and upload them on the map again, this can make it slow.
tks

You don't need to remove them and add them again to your map. One approach you can do is create separate arrays for the different "types" of restaurants from your original array. And create a set of markers based on the each of the different arrays.
There is a marker option called visible that you can set when you instantiate your markers, you can set this to false to start. Then based on what layer is selected (say on a checkbox), you can toggle the visibility using the setVisible(true/false) method on each of the markers in your selected array.
Here is a demo of how you can implement this (only have it for one array, but the same would follow for all your arrays of restaurant types) - this would essentially mimic turning on/off layers on a map.

Related

Showing sets of markers on different layers of Google map

I need to show a set of markers on a Google map.
I know markers can be added directly on a Google map but given that I have 3 sets of markers, one for shops, one for parks and another one for hotels, how can I show them on 3 different layers and so that later on using javascript, I be able to hide one set of markers by doing sort of:
myLayer2.setMap(null);
I have checked Panoramio layer but it needs the images first to be uploaded to panoramio, but in my case for some particular security reason I cannot upload them to panoramio. I will have images locally and set those at runtime based upon some criteria.
Is there some way to do layer based work without using panoramio approach?
The Maps-API doesn't support this kind of custom layers(as you maybe know them from other map-API's like e.g. leaflet).
But it's not hard to achieve a similar feature.
You may use a google.maps.MVCObject. for every "layer" create a property for this MVCObject and set the value of this property to null or the google.maps.Map-instance(
depending on the desired initial state of the "layer")
var myLayers=new google.maps.MVCObject();
myLayers.setValues({parks:null,shops:null,hotels:map});
//hotels initially are visible
When you want to add a Overlay...e.g. a Marker, to a "layer", bind the map-property of that Overlay to the related property of the MVCObject:
parkMarker=new google.maps.Marker({/*options*/});
parkMarker.bindTo('map',myLayers,'parks');
To toggle the display of all features within that "layer" you only need to set the property of the MVCObject:
//show the parks
myLayers.set('parks',map);
//hide the hotels
myLayers.set('hotels',null);
Demo: http://jsfiddle.net/doktormolle/UA85N/

Using two dynamic layers on Google fusion maps

I have created several Fusion table maps, which all work great, but in one of the maps, I want to create a dual layer functionality, so my POLYGON is viewed from the beginning, and when you zoom in, you instead have the functionality of LINESTRINGS. From what I understood, it's not possible to have two active dual layers simultaneously, and having functioning lightboxes for them.
How can I make something like this work?
Here is the example: Parkeringszoner i København
You will need to use the FusionTablesLayer in the Google Maps Javascript API v3
You can have multiple (up to 5) FusionTablesLayers on a single map and write code to change the one being displayed based on the zoom level of the map.

Google Maps V3 creating polygon from county name in XML data

Well I have run into a bit of a small problem and I am not sure how to approach this. I have this test map.
http://www.mesquiteweather.net/googlemap_poly.html
Which creates polygons based on data from this XML file.
http://www.mesquiteweather.net/xml/warnings.xml
It displays weather alerts/watches/warnings etc on the map from the data which makes the polygon that shows what area the alert is in and I have an array in another file that assigns the color. All that works great.
Here is my problem. The XML feed doesn't always display alerts with polygon cords that can be split to create latlng object to create the polygons, I will only get county names half the time so there may be alerts in the feed but they will never get displayed if there is no polygon cords. If you look at the feed for cap:polygon you'll see not all of them have it. Right above it though is areaDesc which is the county name. So is there an easy way to create a polygon base on the county name from that data and how?
I have been searching the web with no results. I did read about fusion tables but will that work and can I use that to draw the polygons based on the data from the feed then have fusion tables draw it out? I don't know, I am doing stuff with Google Maps I have never done before so I am out of my element and could use some guidance and assistance. Any suggestions or advice would be greatly welcomed so I can put this project to sleep.
-Thanks
You can use FusionTables to display a FusionTablesLayer with specific counties on it, and style those polygons dynamically (with up to 5 style rules).
FusionTable containing US counties
Selected counties
Example that displays the counties (using a FusionTablesLayer) on the map
Proof of concept, not sure this will be usable with this many counties.
Probably OK with a small number of counties (your original example)

Is it possible to add a Polygon layer to a google map v3 without using fusion tables

The question is pretty descriptive.
I am working on a website that provides locations for filming.
All the data in the site is currently stored in a MySQL database including geocode data for google maps.
I need to show polygon areas for the different london boroughs that has locations.
I have all the data as kml files, idealy i would like to store this in the MySQL database.
I have had success using fusion tables to display this data, but it seems silly to me to have to have this data duplicated on google just to use a fusion map layer, can i simply use a kml layer to render this data rather than having to create a fusion table and rendering it from that?
If so, is there a resource someone could point me to for more information?
UPDATE:
Thank you for the responses so far, i thought i would update the question with a little more info .
I eventually want to have all the areas displayed at the same time on my map and then when an area is clicked on ideally it would take you to another page on the website showing locations for that specific area.
I had initially tried using KML layers but i was getting errors saying my KML was invalid.
The KML was initially stored in a field in my database table, i think probably the errors were due to me not understanding exactly how google read in the KML data.
Using polygons would be far simpler to implement as i can get this data via JSON and then render the polygons from that.
I know now its not possible to have info windows with polygons, but i would just prefer to jump directly to another website page with info for that particular area using a click handler rather than show an info window.
Alternatively as suggested showing a tool-tip with a brief description of the area and a link to the page would be better, how the tooltip itself, is it possible to render on top the map?
I am slightly worried that I will reach the layer limit for the KML.
Is it possible to have multiple polygons rendered with KML on one layer, or do i need a separate layer for each clickable area?
The Google Maps API provides a pretty straightforward method to draw polygons.
Basic Example:
var polygon = new google.maps.Polygon({
map: your_google_map_instance,
paths: array_of_latlng_points,
fillColor: "#336699",
fillOpacity: .5,
})
EDIT: For this approach, you would need to parse your KML files (sorry, must've missed that when I first read it). You can import the KML files to a KML layer
You can overlay Polygons using KmlLayer, FusionTablesLayer (as you know), or native google.maps.Polygon objects.
KmlLayer and FusionTablesLayer render them as tiles, so for lots of Polygons (if you only need click events) will be more efficient. There are limitations on the number of KmlLayers that can be displayed on the map at one time and on FusionTablesLayer (but those don't seem to be causing you problems).
There are also third party parsers available for KML (geoxml3, geoxml-v3) which will take your KML and render it as native google.maps.Polygon objects. For lots of Polygons, this will be less efficient than tile based rendering, but it does allow mouseover/mouseout, and changing the properties of the Polygons dynamically.
You could also try data layers what have lots of events so you can display tooltips, info window, status text on various mouse events.
See samples in documentation:
https://developers.google.com/maps/documentation/javascript/datalayer
If you have many polygons (where the actual value of many depends on multiple factors, can be anywhere between 100 and 1,000) the best is to use a built in layer type. The fastest are the ones rendered on server, e.g. kml layer because this doesn't create hundreds of DOM elements in browser but still exposes click events so infoboxes can be displayed for each item.
In the worst case you can implement your own rendering with an image map, obviously by using an existing library like mapnik.
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes

Simple map interface to create geo bounding boxes?

Hoping someone can point me to an existing resource so I don't have to create it myself.
Basically I need to get a series of lat/long coordinates that represent geo bounding boxes for Japan. The API the data is meant for allows multiple bounding boxes, so I want to create a series of smaller boxes that cover's about 99.9% of the country.
All I need to do is click on a map to indicate the north-east and south-west corners of a box, but I have been unable to find anything that quite does this.
The closest I found was this http://paulisageek.com/hacku/examples/geoBoundingBoxTabs.html. However it doesn't allow multiple bounding boxes, but more importantly doesn't provide the lat/longs that were calculated nor the ability to modify the boxes.
Doesnt look that hard with the new drawing tools library in the google maps api
http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools
you get the coordinates, in callback event handlers.