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);
Related
I'm displaying several large lists of geojson files on google maps, using this call:
map.data.loadGeoJson()
within this lists, I have points of different categories, and I want to assign each category with a unique icon, so points would show up differently and user can tell which category a point is without clicking it.
I have all the info built into the geojson, but not sure what javascript call to make in the HTML page so I can set each point's style to the right icon. if anybody has some ideas to share would be great!
thx for your help!
Have you looked at Data Layer: Dynamic styling?`
Its not automatic, but user will not have to click.
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
I am trying to create a static map url using google maps api which looks similar to following
It seems like I require to increase the zoom levels and add a path parameter to the url. I have tried to create url like following
http://maps.googleapis.com/maps/api/staticmap?scale=4&format=png32¢er=50.133751,4.833644&zoom=16&size=640x640&markers=color:red%7C50.133751,4.833644&sensor=false&path=color:blue|48.133751,4.833644|50.133751,4.833644&style=feature:road.local
But it is not giving required results, I need to create dynamic urls based on the addresses and lat/lng values provided. I somehow requires to rotate map in such a way so that it always have a vertical road in the middle so that I can draw a path over it. Additionally, I need a bubble which will show a fixed time to reach say 5/1 min.
I am not using any programming language as of now. I am trying to create these urls manually.
Thanks in advance.
EDIT : I don't need to rotate it now. Just wants to show a 1-5 min directions to the given latitude/longtitude/address value and for message bubble, I have created a static image which I can show as an overlay.
Based on your specific needs to show a path and a time from 1 to 5 minutes I would recommend the following:
First of all you need to know that you have two possibilites concerning the label
Use the standard marker and add a label with a length of 1 and [A-Z], [0-9] (so just the time in your case...one to five)
Use a custom icon which already includes the label (in your case this is a option because you just have to create five images containing "2 min" or something)
For the first option I would take the center of two connected points and add a white marker with the label of the route duration like markers=color:white|label:1|52,5210924,13,39181335. Then you will have a white standard marker on your route like this.
For the second option you can change the marker position away from the path (depending on how your label image looks like) and add the image with the correct duration (1.png, 2.png, 3.png,...) like markers=icon:https//your.path/to/image.png|52,5210924,13,39228335. Like this you can include your own image, which would look like this (sorry for the bad image ;-)).
Adding a custom marker icon with a label (in the URL) is sadly not possible.
I think in your case (also when creating it manually) it would be fine to create 5 bubble images and add those as described to your static map. The faster and easier (but not so good looking) way would be the first option, because you could place it right on the path and don't have to create the bubble images.
i basically want to create a map which shows all the hotspots.
a bit like what this example does: google maps example
for example i'm going on a vacation and i want to know the nearest supermarket, nightclubs and bars. so i want to just type in a location and it shows me these spots with a custom marker.
i can figure most of this out myself but i can't seem to get multiple custom markers in there.
The results returned by a placesSearch contain multiple properties for each result, one of them is the icon-property which contains the URL of the icon, e.g.:http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png
i've found the answer in a different example:
https://developers.google.com/maps/tutorials/customizing/custom-markers#customize_marker_icons_for_different_markers
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/
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.