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.
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 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 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 have a number of events in the US. I have addresses for these events, but it varies in accuracy. Some might be the full address, some might be just "Austin, Texas".
I'd like to plot these programatically on a map on a webpage with a marker as they'll change fairly regularly. The marker should be an internal link to the relevant row in the table of events lower down on the page.
The image doesn't need to be updated on the fly, just on the (say fortnightly occasions) when an event is added (e.g. a cached image is cleared and recreated)
Rather than use Google maps, I'd like to plot these on top of an image like this: http://0.tqn.com/d/geography/1/0/9/H/usa3.jpg
How would I go about putting markers on this image that correspond to the (rough) geolocation of these events?
Your best bet might be to use google maps and plot the locations and then just pull an image of the map - that way you can let google do all the work of placing the pins but not have to worry about people zooming, since it is a static image file.
Beyond that, you can type the locations into any mapping service to get a rough idea of the location and then place markers or dots on your map file in the same location. This would allow you to choose whatever image or color you want the icons/markers to be, since you will find and place them yourself.