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/
Related
I built a map for our website. There are different pages where we want to show a different places. Therefore i build this one map with all the needed places within. When i embed the card, it shows the summary of all pins in this map. Is there a way, to show one active pin, with its informations?
I searched for different parameters, with which you can alter the display of the card. But none of them is showing an explicit place.
This is a test map showing 4 pins. What should i do to show one chosen pin?
Hope this is understandable.
Thank you in advance.
When you say you want to "show one chosen pin" does it mean you have an info window for this marker and you want to display it?
If so, you can add unique ids for each infowindow and pass the chosen infowindow id to the url with url params such as https://mymapssite?chosenMarkerId=markerId
And then you can check if this param is given and if so do something like
document.getElementById("markerId").open(yourMapsRef, yourMarkerRef);
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.
I want to show data (numbers) from database on the map, instead of just pointing the place and clicking on the pin to show data, I want it shown already where the pin is. I use this example to make the google map with pins: http://tips4php.net/2010/10/use-php-mysql-and-google-map-api-v3-for-displaying-data-on-map/
I cannot show images because I'm a new user, so here is an example of what I want to show on map, information about prices instead of usual pins: http://www.norc-imobiliare.ro
You may use the dynamic icons of the Image Charts -API. But this API is deprecated, it may(but must not) stop working in 2015.
The other options:
create an own serverside script that takes the strings(prices) as argument and delivers the desired image based on the input.
create a overlay instead of a marker, it may contain any HTML. e.g. infoBox would be usable.
I would like to know how to create effects / animations over Google Maps markers. Specifically, I would like to zoom-in/out or "fade" a marker after a given amount of time. Could it be possible with HTML5 ? Is there any jquery effect library for doing this?
(I could use a map tile server for creating map tile overlays and re-generate tile overlays every second, but I guess it is very processing-intensive...)
Thanks in advance
I haven't seen any library to do this, and there isn't functionality in the API to fade Markers per say.
Instead, what you can do is simulate markers by creating your own Custom Overlay that looks like a marker. A custom overlay usually contains a div, which you can easily control the opacity of using JavaScript / jQuery based on a class or id you assign during the custom overlay construction.
As an example, if you look at this page you can see the is a button used to toggle the visibility, you could just as easily change that JavaScript to control the opacity of something.
I am looking at doing something similar.
If you set the marker option 'optimized: false' for all markers, each will have its own element, you can then use jQuery to select all the markers on your map using something along the lines of $('#map_canvas img[src*="filename"]'), assuming that you're using custom images for the markers.
What this doesn't address is relating each element in the array returned to a specific marker.
I think that you could add the markers to the map one at a time, re-run the jquery selector, and compare the elements returned vs. the previous run, to see which element was new. I haven't tested this part (I have what I say in the first paragraph), as I'm working towards something slightly different.
You should then be able to adjust the opacity/size of the image directly.
This might get clunky for large numbers of markers.
Paragraph two above is stupid.
Add a marker to the map, making sure to set the optimized:false option. then
var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]');
The newly added marker won't have the class, so will be the only element selected. Before setting the className, you could set an ID, add the element to an array in the same index position as the corresponding marker object is held in another array, etc.
This should be a lot less clunky to implement than what I proposed previously. I'll try and come back with a working example soon.
I suppose if you knew that there were groups of markers that would share the same transform (zoom/fade), due to being the same age or whatever, then you could add all of them and only do the jQuery select at the end, before looping through the returned elements setting a class that would allow you to adjust them en-masse.
I created a public map using my Google Map. I want to set a default zoom level, but it is not saved. Is this possible?
Also, is it possible to change the list of place markers?
the reference map that you supply (quebec summer festival) is called by the URL: http://maps.google.com/maps/ms?source=embed&hl=en&geocode=&ie=UTF8&msa=0&msid=112492115201367239282.0004609e0fcc239c4f792&ll=46.81084,-71.217113&spn=0.02056,0.038624&z=15
notice that the last parameter "&z=15" defines the zoom level (in the embed map code, "&z=15" becomes "& a m p ; z = 1 5" [remove spaces between letters]). if you change this you can increase or decrease the zoom level. if you suppress the zoom level, googlemaps will automatically calculate a zoom level when displaying said map. NORMALLY this leaves some of your map outside the frame.
so, just by supplying the URL with the desired zoomlevel you have solved your problem. this works very well with static maps. if you have a dynamically generated map (from a database, for example), the fastest solution is to put 2 markers (top left and bottom right corners) slightly outside your boundary box. this will force automatic zoom in the desired amount (hopefully).
Not using API just made a map points using my GMail account and made it public, like the following site:
http://maps.google.com/maps/ms?source=embed&hl=en&geocode=&ie=UTF8&msa=0&msid=112492115201367239282.0004609e0fcc239c4f792&ll=46.81084,-71.217113&spn=0.02056,0.038624&z=15
Nothing is saved by a web page. HTML browsing is stateless. If you want to save some information you will need to use similar trick as any other web applications. E.g. putting it in cookie and the setting the zoom level using the information in the cookie when you initial the page.