How can I pass overlay map image with image bounds in static map service?
I have an image which I want to overlay on map at certain position, looks like current static map image service doesn't provide any parameter to pass that.
You are right. On static maps you can't send add custom overlays like in the javascript api. But maybe you can consider this as work around, you Add custom markers on your map URL.
You can use up to five unique custom icons per request. This limitation does not mean that you are limited to only 5 marked locations on your map. Each unique icon may be used with more than one markers location on your map.
Icon format:
Icon images may be in PNG, JPEG or GIF formats, though PNG is recommended.
Icons may be up to 4096 pixels maximum size (64x64 for square images).
Related
I know that Google Maps provides an API for getting static images:
https://developers.google.com/maps/documentation/static-maps/intro
However that API gets as input a center point, zoom level and output image size.
In my case, I need an image that fits a given area taking as input the NW (top-left) and SE (bottom right) coordinates describing the rectangle of my area. I don't see that option within Google Maps API, so I'm wondering if there is another way to accomplish this.
You can omit the center and zoom parameters if you specify at least one marker. In this case you can show a certain area with a marker.
For example, I have bounds of Barcelona in Spain:
41.320004,2.069526 and 41.469576,2.22801
I can easily calculate the center position of the bounds:
41.39479,2.148768
Now, let's put a marker in the center of bounds and use the visible parameter of Static Maps API to specify NW and SE.
visible (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the Google Static Maps API.
https://maps.googleapis.com/maps/api/staticmap?size=600x400&markers=icon%3Ahttp%3A%2F%2Fwww.google.com%2Fmapfiles%2Farrow.png%7C41.39479%2C2.148768&visible=41.320004%2C2.069526%7C41.469576%2C2.22801&key=api_key
Code snippet
<img src="https://maps.googleapis.com/maps/api/staticmap?size=600x400&markers=icon%3Ahttp%3A%2F%2Fwww.google.com%2Fmapfiles%2Farrow.png%7C41.39479%2C2.148768&visible=41.320004%2C2.069526%7C41.469576%2C2.22801&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&signature=WkICJTRmmI1EgDK2VJI4l9lt3qA=" title="" />
As a result, you have an image with specified area. I think you can even go further if you create a transparent png file for marker icon.
Hope it helps!
I'm using foursquare API to show some places on a map. When I tried to render the icons in the categories some images give 404. Ex:
https://foursquare.com/img/categories_v2/shops/mall.png
So I change the pattern to match this path that is the path that foursquare uses for it's icons:
https://foursquare.com/img/categories_v2/shops/mall_32.png
The problem now is that these icons have transparent background (which looks confusing) and I want to know a way to attach these markers some kind of background.
Thanks!
PD: I don't want to use shadows because I read it's deprecated.
Google map markers are put in place as Canvas elements not DOM elements, and there's no direct equivalent of a background image.
You could try one of two things :
Create your own marker image complete with a halo or background rectangle, then specify your image as the icon when marker(s) are created (see the marker options section of the documentation).
Create a general purpose background image with no foreground then, for each required marker create two markers positioned such that the foreground overlays the background.
The first approach is more efficient and would generally be preferred.
The second approach might be useful if you had many types of marker and wanted each of them to be set against the same background image. This would be inefficient in terms of client CPU and RAM but would save you time in preparing the artwork.
How do I add a larger map marker image to an Overlay? I'm using KMLLayer and the icon url is inside my KML file. Google Maps appears to scale it down when i link to the larger icon.
I tried the inside the KML but that didn't have any effect on the size of the image or something else is overriding it.
I believe it forces it to 32x32, but I need one at least twice that for a touch screen/kiosk app. My icon is 64x64.
Thanks,
Don
Using geoxml3, the kmz branch, your icons are displayed full size (if you change the <scale>0</scale> to <scale>1</scale>.
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmztest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/doubletaketech_net_RigsB.kml
geoxml3 parses the KML in the client and renders the markers as native Google Maps API v3 markers. For large numbers, KmlLayer is a better option, as it is rendered as tiles, but it doesn't seem to render markers at their native size, and it doesn't support the scale tag
It also looks like you have the <hotspot> defined incorrectly:
http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmztest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/doubletaketech_net_RigsC.kml
I am using the Static Google Maps API v2 to download a static image of a map view with a singular marker just showing one image. However, the image added to the marker parameter of the url doesn't seem to be making any difference, and just a red marker is shown at the location.
Please can you tell me where I am going wrong?
http://maps.googleapis.com/maps/api/staticmap
?center=37.446754,-77.572746
&size=70x61
&maptype=roadmap
&sensor=true
&scale=2
&zoom=15
&key=some_key
&markers=icon:https://foursquare.com/img/categories_v2/shops/financial_bg_64.png|37.446754,-77.572746
your image URL must remove the letter S HTTPS secure site, so work, for example like this:
http://foursquare.com/img/categories_v2/shops/financial_bg_64.png
complete code:
http://maps.googleapis.com/maps/api/staticmap?
center=37.446754,-77.572746&size=70x61&maptype=roadmap&sensor=false
&scale=2&zoom=15
&markers=icon:http://foursquare.com/img/categories_v2/shops/financial_bg_64.png|37.446754,-77.572746
In my experience,
There is no such requirement of http or https just care for icon size .
icon size should not exceed more than 64X64 pixels in size , Static map will happily show the custom icon . accept if found correct #max_
http://maps.googleapis.com/maps/api/staticmap?
center=37.446754,-77.572746&size=70x61&maptype=roadmap&sensor=false
&scale=2&zoom=15
&markers=icon:http://foursquare.com/img/categories_v2/shops/financial_64X64.png|37.446754,-77.572746
off course use your image with below 64X64 dimension instead of
http://foursquare.com/img/categories_v2/shops/financial_64X64.png
You're actually not doing anything wrong, it's Google to blame:
"The Google Static Maps API does not support custom icon URLs that use HTTPS"
I need to create a static image of google map with several markers, and each marker has a custom icon.
In the Api DOC there is the note: Static Map URLs are restricted to 2048 characters in size. In practice, you will probably not have need for URLs longer than this, unless you produce complicated maps with a high number of markers and paths.
The url is very long.... There is the position for each marker and the URL for the custom icon for each one.
I've already tried with POST request ma it is not supported.
There is another way to create a static map image without max length limitation?
A possible way might be this, but i don't know if is it possible: I've create my custom map using the function in GMaps, and i have added all the markers i need.
There is a way to access in static way to this particular map? so in the url i have to give only the center of the map and other parameters (zoom, ...), but all the markers are already positioned.
Or... another idea... Can i submit the URL of a KML with all markers positioned instead each single marker position+icon url?
FYI, Google recently updated the limit to 8192.
Have you tried using a URL shortener for the icon urls? I believe the static map API will respect services that make URLs shorter... might save you a few characters.
You might wanna check out toopola´s API to help working with Google Static Maps, I am about to make my own attempt.
Another idea
find map area that contains all the markers
divide the map area into rectangular pieces (4 pieces for example)
create image url for each part, but include in url only markers and icons visible on map
show images
Мethod of division depends on the markers position.
Yes, you can definitely do this with the Javascript API.
I have built a few applications using that API. It can be a little tricky to get your head around, but it is pretty good. For what you want to do, it would not be too difficult. If the user has to be able to interact with the map and add pins and such, it starts to get a little more complicated because you have to capture clicks and such.
Does the map its self need to be available as a URL, or does it just need to be embedded on some page and that URL can be used?
The Javascript API will work best if you can embed the map into an existing webpage.