I'm writing an application where user can point a position in a Google Maps map (using Google Maps API).
I grab the position by:
google.maps.event.addListener( my_map, 'click', function(mouseEvent){
var position = mouseEvent.latLng;
//position = 41.57187486787156, 0.609094047546364
});
Then, in an another page, I display an image with all marked positions using Google Static Maps using the coordinates grabbed from user marked points:
<img alt="map image" src="http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=550x380&markers=label:A|41.57187486787156, 0.609094047546364">
Google Static Map displays the marker a little to the south.
Static Maps has a precision-limit of 6 decimals for locations, the marker-position will be rounded and set to 41.571875,0.609094
You'll need to round the values inside the dynamic map too to get the same marker-location on both maps.
Static means "constant--never changing".
dynamic is "changing". You can make dynamic changes to a database without having to shutdown the instance and restart for the changes to take effect. However, if you do not update the control file, when you shutdown and startup, the dynamic change is gone--it wasn't permanent.
Static sites are meant for those sites that cant be changed or updates regularly.
and Dynamic sites are those sites that changes or update regularly.
Related
In My application I have to show split of markers which means all markers should be visible. If one marker geo distance is longer than others it should show like below.
In Google Dynamic Map API which is possible by “Spiderfier”. Refer the link below and below image.
http://jawj.github.io/OverlappingMarkerSpiderfier/demo.html
Like this option, I have to split of all markers in Google Static MAP API.
Any possibilities there to visible all markers ?
Static Map URL:
http://maps.googleapis.com/maps/api/staticmap?sensor=false&channel=Resivalue&scale=2¢er=29.900598698735365,-95.69396430030821&zoom=13&size=1300x500&maptype=roadmap&markers=color:green%7Clabel:S%7C29.89357,-95.68815999999998&markers=color:pink%7Clabel:1%7C29.893167,-95.68737599999997&markers=color:pink%7Clabel:2%7C29.893904,-95.688424&markers=color:pink%7Clabel:3%7C29.892301,-95.68776500000001&markers=color:pink%7Clabel:4%7C29.892343,-95.68866200000002&markers=color:pink%7Clabel:5%7C29.894404,-95.689029&markers=color:pink%7Clabel:6%7C29.893235272621563,-95.68611836505124&markers=color:pink%7Clabel:7%7C29.892402,-95.68687699999998&markers=color:pink%7Clabel:8%7C29.891934,-95.688918&markers=color:pink%7Clabel:9%7C29.919640547998576,-95.72656616430663
As stated here
Google Static MAP API Disadvantages :
The main disadvantage is the lack of a map interactivity – if we
need a map to scale, move or if we need to roll down a window after
clicking on a marker; Google Static Maps is not a solution for us.
URL address of a map has a restricted length (2048 symbols) which
sometimes may make impossible to present all needed content on a
map.
Limits also apply in the case of own images markers placing on a map
– in this case it is 4096pixels (64 x 64 px).
I have an application that downloads static images off Google maps, with markers placed where I want them (Placed by passing arguments into the Google Static Maps URL). However, I also need to be able to click the markers. I figured I could convert the x and y coordinate is the click to lon/lat, and then figure out that way which marker was clicked, but I haven't found that too easy.
I know the dimensions of the map in pixels, the zoom level, and the centre point of the map in pixels and lon/lat, so I followed this blog post. Unfortunately this didn't work.
Does anyone know how I could do this, or know another way I could figure out if a marker has been clicked? I'm forced to use the Static maps unfortunately, so I can't do any of it with the JavaScript API
See:
http://home.provide.net/~bratliff/largetiles/
or
http://home.provide.net/~bratliff/harbor/
It is not exactly what you are doing but it does demonstrate Mercator projection conversions & cross-browser mouse events.
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.
I have a batch of high definition images, and I want to make use of technologies like google maps to view the images, user can use zoom pan to zoom in and out quickly without downloading the whole big picture file(they only need to download the viewport of the big image).
How can I do this?
Thanks.
Bin
If the image in question is actually a map or something that can be reasonably overlaid onto a map, use MapTiler (http://www.maptiler.org/) to split it into tiles, then use code like this to display the tiles:
var lat=37.767569;
var lon=-122.392223;
var initialZoom=17;
var tileDir = 'tiles_dir';
var mapTypeId = 'Your Custom Map';
var mapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256,256),
getTileUrl: function(coord,zoom) {
return "img/"+tileDir+"/"+zoom+"/"+coord.x+"/"+coord.y+".png";
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center:new google.maps.LatLng(lat,lon),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:initialZoom,
mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);
map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);
Note that Map Tiler sets the image name to something Google Maps API v2 specific. If you are using v3 (and you should!) you'll have to take each file name (e.g., 2001.png), and move it to a file name that's good for v3. To do that on Linux or a Mac, cd to the tiles directory and run this script (note that the script assumes you are in the tiles dir!):
#!/bin/bash
tiles=`ls -d */*/*`
for thisPath in $tiles
do
thisFile=${thisPath#*/*/}
oldY=${thisFile%.png}
zoomX=${thisPath%/*}
zoom=${thisPath%/*/*}
newY=$(((1<<zoom) - oldY - 1))
mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done
Now, even if your image is not actually a map or something that would be reasonably overlaid on a map, hopefully this gives you some ideas of where to look and what to poke around with if you want to leverage Google Maps. (There may be tools out there to let you easily build this type of functionality without Google Maps, but if so, I have no experience with them.)
There's Google Maps, of course. I'm totally serious: GMaps API allows you to create custom map types, you'll need to give it a way to show the "tiles" (parts of your image) at a given zoom level.
The most work I'd assume would be in creating the "tiles" from your image at various zoom levels (split the image into smaller rectangles), but I suppose that can be automated. The UI, dragging, zooming and whatnot is then handled by the JavaScript script of Google Maps.
(this works, I've made a boardgame with such custom tiles, using Google Maps as the underlying framework for showing it.)
I've just found this library, which is quite slick: http://polymaps.org/
I know I can do it with the Google Maps API, but do you know if there is a way to change the marker in an embedded Google Map?
I want to replace the default "A" button for a "B" button or the marker with just a dot in the middle.
I haven't played around with embedding Google Maps before (I generally go straight to the API for stuff like this). I tried a couple of approaches:
I figured maybe the embed syntax would be the same as the static maps api. So I grabbed a static maps URL, copied the markers param from that and tried sticking it into the iFrame URL. This didn't work so much.
I created a Google MyPlaces and customized the marker to use the one your provided. This created a Test map which had the appropriate marker icon. I then grabbed the embed code and stuck it on a test page and voila!
Actually I had the same problem but didn't use any of the methods above and thought I share:
If you only want a marker as I did but don't want to use API then simply fool google into thinking you want a route planned using the GET tags "saddr" and "daddr"
"saddr" defines your start location (post code , street name+ number, whatever)
ONLY define saddr and leave out daddr and google maps will by default still show the marker for "A" (your start location) exactly where you want it , all in iframe without API.