Im not sure how but thats the only conclusion I can come to.
Ive been playing around with placing a marker at a distance along a route, I found Mike Willamsons epoly.js and some example files and started to play around with them but for some reason the exact same code doesnt work on my server.
eg
http://www.geocodezip.com/v3_GoogleEx_directions-waypoints_kmmarkersC.html
is a simple example that drops two markers at 2 different distances along the route.
I simply viewed source, copied the entire code and pasted it into an hmtl file on my server, taking care to create the scripts directory and drop v3_epoly.js into it.
As you can see below, my page however does everything except output those 2 important markers.
http://peg-web.me.uk/map/
Am I missing something fundamental?
I know, this forum isnt for the epoly.js add in but Im trying to establish if my problem is more fundamental ie related to javascript itself.
Those marker icons are referenced with relative URLs, copy the icons onto your server, put them in the same relative location to the HTML page and they will appear.
Or change this line in the createMarker function:
icon: getMarkerImage(color),
To (comment the property out):
// icon: getMarkerImage(color),
(that will make them use the default marker icon)
Related
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 have a Google fusion table that has a map based off a column of coordinates. The map and fusion table work fine for my application, but I'm noticing inconsistencies between the map view through Google fusion tables, and the map in my application which uses that exact fusion table. I'm wondering if anyone out there has had similar issues and if/how they alleviated them.
Inconsistencies:
Overlay color. The overlay color is set to green through the Google fusion table map view, but displays red in my map app, no matter what I change it to or how many times I change it.
Number Formatting: I've formatted the numbers to be displayed with
commas (123456 should be 123,456) through Google fusion tables UI. It is displaying like this when I view the column through the fusion table interface but it still displays it as 123456 in my application.
Google map pop out balloon. The pop-out balloon is not big enough for the text contained within it. So part of the text hangs off the bottom of the balloon. In some browsers/sessions it works fine, in others it hangs off the bottom.
Thank you for reading my question.
I also had run into your pop-out balloon overflow problem. Prior to today, I had just solved it by avoiding use of the <p> tags, favoring instead <br>. Today I searched for a separate solution which led me to an answer I think you'll get much benefit from: Tip: Use dynamic templating
I also ran into your first issue with overlay displaying as red. This is a baffling bug with fusion tables map styles. The only way I resolved it was by setting each style to default, then changing the overlay color to "static for all entries".
About number formatting. using the dynamic formatting link above, you can see that there's a way to deliver the formatted number, which uses a variable property of {$data.formatted.ColumnName}.
I hope that this answers all of your questions.
Ive found a solution to why the overlay colors are inconsistent and also why the pop-out boxes are not large enough for the containers:
You need to add "styleID" and "templateId" properties to the Fusion Tables Layer object:
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: 297050
},
map: map,
styleId: 1,
templateId: 2
});
The way to find what your ID's are is a little tricky. Open your fusion table, click on the "map" tab and click "publish" in the dropdown from the map tab. Copy that URL and paste it somewhere, look for something like this towards the end of the URL:
"y=2&tmplt=2"
the "y" is the styleID and the "tmplt" is the templateId.
I'm still working on the solution for the number formatting, thanks dwagPDX, im going to try your solution and let you know how that goes.
https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles
https://groups.google.com/forum/#!topic/fusion-tables-users-group/EceabeRWqWc
I'm trying to get a static image of a hiking trail from google maps static image API, and I'm seeing some strange behavior. Sometimes, it works pretty well and then other times, it either doesn't show the path at all or it renders it in a strange way.
Here's an example of a path which doesn't show-up the way I'd expect: jagged path
When I build a KML from these same coordinates, everything shows-up just the way that I would expect. But when it's sent to the static images API, something's getting mixed-up.
I've played around with adjusting the center of the map and the zoom with no noticeable effect. In order to fit within the URL character limit, I had to cut down on the number of coordinates in the path. I've tried adjusting the number of points in the path, but I still get a weird, jagged path instead of the one I see from my KML file.
I've also tried to remove coordinates from the above URL until I can find the culprit, but then I run into a different issue. Try this image: no points at all. You'll notice that the path doesn't show at all in this image.
Sometimes, the call works just fine (I don't get the granularity I'd like since I have to trim coordinates to with within the URL length limit - but I can live with that). You can see an example here: working example
What's going on? Am I making some simple mistake that I can't see or is this something on google's end? Thanks!
I figured it out. I wasn't escaping the URL correctly. I skimmed through the API site too quickly (found here) and when I went back and looked through the guide again, I noticed some things that I missed the first time. I was using the python url escape function which was not escaping the parts which needed escaping and escaping things which didn't need to be escaped.
Here's an example of a working path:
http://maps.googleapis.com/maps/api/staticmap?format=jpg-baseline&maptype=terrain&size=320x320&sensor=true&path=color:0xff0000ff%7Cweight:2%7C34.680923,-83.998035%7C34.682763,-83.996703%7C34.684612,-83.995759%7C34.685855,-83.994969%7C34.687478,-83.993794%7C34.689339,-83.99301%7C34.691484,-83.992649%7C34.693114,-83.991636%7C34.695631,-83.991983%7C34.697488,-83.990639%7C34.698856,-83.988732%7C34.700114,-83.986356%7C34.701881,-83.985913%7C34.703546,-83.98486%7C34.705588,-83.984205%7C34.707439,-83.985204%7C34.709409,-83.98474%7C34.710815,-83.982891%7C34.713098,-83.982932%7C34.715471,-83.981058%7C34.715643,-83.97896%7C34.716061,-83.976655%7C34.718408,-83.975622%7C34.718576,-83.972885%7C34.720504,-83.972258%7C34.722156,-83.970446%7C34.723245,-83.970965%7C34.724158,-83.968403%7C34.725936,-83.96585%7C34.727591,-83.963934%7C34.729219,-83.962787%7C34.730165,-83.960224%7C34.730464,-83.957465%7C34.731384,-83.954936%7C34.733571,-83.952937%7C34.735248,-83.951872%7C34.736235,-83.94911%7C34.738577,-83.94717%7C34.740465,-83.946156%7C34.741132,-83.943978%7C34.743225,-83.944512%7C34.745393,-83.943994%7C34.742783,-83.942916%7C34.742451,-83.941822%7C34.741552,-83.940703%7C34.740811,-83.939462%7C34.74023,-83.937804%7C34.738605,-83.936371%7C34.736056,-83.935923%7C34.734862,-83.935931%7C34.736535,-83.934433%7C34.737494,-83.932963%7C34.738196,-83.931812%7C34.737864,-83.9307%7C34.735883,-83.930629%7C34.735412,-83.928034%7C34.736785,-83.925242%7C34.737286,-83.922985%7C34.735846,-83.918937
For the last couple of days I've been working on a map that can add data through a InfoWindow to a MySQL DB. I successfully did so by using this (phpsqlinfo_v3).
Now I need to be able to load all the added markers that are created to the same map. I followed the instuctions at this link (`phpsqlajax_v3).
I successfully got that to work as well. The problem I am having is that I can't put the two together. The only way I can get them to work is by having separate maps. At the bottom of the first link it states that if you go phpsqlajax_v3 and skip down to the create the map section, you can put it all together. I've tried what seems to be everything under the sun but and having no luck at all. Can someone point me in the right direction or lay out what I need to do to get it all to work and on the same map.
So this might be a bit tricky to demonstrate, since the problem only appears occasionally and unpredictably--hopefully the problem shows up when you view this question (or, alternatively, has stopped appearing altogether!).
We have a Google Maps implementation on our site that displays paginated search results on a map. The current page's results appear as regular Google Maps markers (with custom icons--these work fine), but the other search results appear as smaller markers in a KML layer. An example:
http://www.redflagdeals.com/in/verdun/map/
The large markers are squarish pin images; the small markers are coloured dots. Blue and purple markers/dots simply refer to different types of content. In the KML file, we've specified two Styles, one for each content type. Other than the Icon reference, which points to the different pin images, the two elements are exactly the same. Here's an example generated KML file for reference:
http://www.redflagdeals.com/in/verdun/map/?do=map_kml&longitude=-73.56895400000002&latitude=45.457064&order=deal_price&dir=asc&category_filter=0&content_filter=0&tag_filter=0&keyword=&page=1&show=deal%20coupon
Most of the time, our map shows the large and small markers perfectly. Occasionally, though, some or all of the small pins show up without the custom icons, instead reverting to the generic blue Google marker image. Today, the custom minipins that show up in blue are broken, while the purple ones are all fine. Other times, both the blue and purple ones are broken.
The problem usually fixes itself, leaving us clueless as to the cause or the solution. The only theory I have is that we use a CDN to host our marker images, and occasionally we push a new version to the CDN while updating all the filenames simultaneously (as we have CDN version numbers in the URLs for our images). Maybe it's possible Google is requesting one or both of the small pin images right when we're pushing a new CDN version, getting a 404, and giving up immediately. But that would mean Google caches the KML images (or lack thereof) for quite a long time. Other than that, I have no ideas.
Is there anything we can do to prevent this problem from cropping up in the future?
see this post (Comment #4 specifically) explains caching of custom markers
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3864
I've just tested this, the result is the following:
I'm sure Google caches both, the KML-file and the marker-images.
(Of course they do, otherwise they must load the files and create new tiles on every single request )
So when you change any marker-image, you must change the URLs of the marker-images inside the KML-file.
You also must change the URL of the KML-file inside your application(otherwise google will not recognize the modified image-URL's)
It's sufficient to append a random parameter to the URLs