I need to convert a map built with Google Maps to a static map.
The problem is that map has an amount of data (mainly circles), and its representation has to be doing a path description of its circunference, and I need some kind of accurate, a pure circle has to be displayed in the static mode, so each circle description is about 500 chars (encoded).
The Google Static Maps url limit is 8192 and its not enough for rendering those shapes.
There is another way for doing it? I also tried to use html2canvas, but it is forbidden by Google.
Google actually recently extended the URL limit to 8192, but if you need more than that you probably need to resort to taking a screenshot of a Google Maps JavaScript API map, as suggested by xomena.
A tool like PhantomJS [1] can help you write a script to automatically take a screenshot of a webpage (which you've drawn using the Google Maps JavaScript API).
[1] https://github.com/ariya/phantomjs/wiki/Screen-Capture
I have a small example that uses PhantomJS to take a screenshot of the page.
Here's the JavaScript Map with some information: http://jsbin.com/pevizusana/2/edit
Here's the PhantomJS code that will take a screenshot on this site: http://pastebin.com/gEXhG1dP
And here's the result: http://i.imgur.com/Mj951aP.jpg
I hope you find this information helpful.
I'm the author of osm-static-maps, It's an open source project that you can use as a cli or js library or self-hosted http server. It mimics google static maps and you can pass any amount of data to the map as a geojson.
See the project here for more instructions https://github.com/jperelli/osm-static-maps
I want to create a GAS standalone web app that will have a google map embedded. Visitors will see their location, drag around and will be able to pin details that can be seen by other users. User clicks on a point, a custom form pops, they fill and submit for admin approval. Can we make it happen?
Unfortunately, now it is impossible to implement an application required by you neither using the Ui nor Html Services. The Ui Service can produce only static map bitmaps without ability to drag/scroll, zoom, markers selection, etc. And the Html Service cannot correctly handle the Google Maps Javascript API because the Caja sanitizer, at least, complains once trying to compile any Maps API Sample by outputting the FATAL_ERROR js?sensor=false:13+3 - 15+4: Properties cannot end in "__": Rule "setBadSuffix",... message. There is a proper feature request on the Issue Tracker. Please star it to promote this topic to the developers.
Maps support is planned for HTML service. Stay tuned.
This is still not supported. Same error is returned for html service. The issue occurs as soon as you try to include the Maps API with:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
What I do is I go to a location in Google Maps (either by searching or just by dragging the map). Now I enter another URL in the addressbar and hit return to go to that site.
When I use the browser Back-Button, google Maps automatically switches back to the location I was last in.
How is this done if I dragged the map and didn't use some kind of "POST" on the Google Maps site? I would like to have the same behaviour in my own google Google Maps App.
I'm using Google Maps API for JavaScript v3
I don't know if GMaps has convenience method for this, but generally such functionality is based on HTML5 history.pushState() which lets you add custom steps to navigation history and observe when user navigates back:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
If you want to handle more advanced application states this way, there are several frameworks built on top of it, e.g. Backbone router, LeviRoutes.
In HTML4 browsers pushState can be emulated with fragment identifiers (hash URLs).
First of all you just look for an event called 'dragend' on your map
google.maps.event.addListener(map, 'dragend', function() {
});
Then you need to get your coordinates using getCenter() and redirect your browser to '#coordinates' it won't reload your window as you use hash, but it will save it in history.
coords = map.getCenter();
window.location = '#' + encodeURI(coords);
Now you need to add listener to check for any 'hash' changes in an URL (assuming you have jQuery)
$(window).bind('hashchange', function () {
var hash = window.location.hash.slice(1);
});
At the end you need to tell your map to change coordinates and decode url
hash = decodeURL(hash);
map.panTo(hash);
Instead of panTo() you could use setCenter(), but it add some nice animation while clicking Back button.
It is very easy to change this code to work with your searched place, you can use event 'center_changed' instead of 'dragend' and it will handle everything.
Everything I wrote about is covered here:
https://developers.google.com/maps/documentation/javascript/reference#Map
Hope this helps you.
I have a web app where if a user clicks on a link it should open up a map. The best solution that I can think of is to open up a new tab/window to google maps using the target="_blank" attribute.
But I think that it would be best to open up the device's map app instead of google map.
I know that you can have the user's phone app to pop when the user clicks on a phone number with the href attribute pointing to tel:<the phone number>. I am wondering if this is also possible with the map app.
Is there a way to allow an anchor tag to open the mobile device's map app when the user clicks it?
You can use the GEO URI Scheme "geo:latitude,longitude" specified by RFC 5870 in a link such as
Click here for map
There's also the comgooglemaps:, which launches the Google Maps app for iOS, for example:
comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic
Where
center: This is the map viewport center point. Formatted as a comma separated string of latitude,longitude.
mapmode: Sets the kind of map shown. Can be set to: standard or streetview. If not specified, the current application settings will be used.
views: Turns specific views on/off. Can be set to: satellite, traffic, or transit. Multiple values can be set using a comma-separator. If the parameter is specified with no value, then it will clear all views.
zoom: Specifies the zoom level of the map.
And as techtheatre said, you can use a regular Apple Maps link to trigger Apple Maps:
//maps.apple.com/?q=Raleigh,NC
Leaving off the protocol will automatically select the correct one to use, so if you wanted to have a dynamic link you could just create some conditional code that changes the link between google.com and apple.com depending on which system you're on.
Actually...now that Apple has their own map application, they no longer catch Google maps links and route them into the mapping application (by default...though this can be changed on the device). As such, you now must do some sniffing to determine if the device is Android or Apple. If you use the correct link for the correct mobile OS, the device will catch the intent and instead of using the browser, will go into the mapping app.
If Android, link like this:
https://maps.google.com/?q=Houston,+TX
If Apple, link like this:
http://maps.apple.com/?q=Houston,+TX
This is certainly a pain, and hopefully the W3c will eventually standardize a map trigger (like tel: for phone numbers). Good luck!
No need for anything fancy. You can simply double link the address like so.
<a href='https://maps.google.com/?q=addressgoeshere'>
<a href='https://maps.apple.com/maps?q=addressgoeshere'>
Address</a></a>
On Android this will open the Google maps app, and on iOS this will open the Apple maps app. (Untested on Windows phone)
Here's my jQuery solution for this issue. I wanted to be able to detect the correct map to open up. In 2019, microformats still don't automatically make a link for mobile phones.
I used the solution from this article https://medium.com/#colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4 but modified it to make it current and dynamic.
And, modified the code so I could have an address block in my html. That address is stripped to the basics and sent to the appropriate maps app.
HTML
<span class="map-link">6555 Hollywood Blvd<br/>Hollywood, CA 90028</span>
JavaScript
$(document).on('click','.map-link',function() {
var address = $(this).html();
address = $('<div/>')
.html(address)
.text() // strip tags
.replace(/\s\s+/g, " "); // remove spaces
address = encodeURIComponent(address);
if ((navigator.platform.indexOf('iPhone') != -1) || (navigator.platform.indexOf('iPad') != -1) || (navigator.platform.indexOf('iPod') != -1)){/* if we're on iOS, open in Apple Maps */
window.open('http://maps.apple.com/?q=' + address);
} else { /* else use Google */
window.open('https://maps.google.com/maps?q=' + address);
}
});
CSS
.map-link { text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;}
.map-link:hover { text-decoration-style:solid;}
Attending an old party here.. However, i am still struggling with this in 2021 :D
It appears that using the following link
http://maps.apple.com/?q=Houston,+TX
Opens Apple maps on apple devices and google maps on non apple ones. Thanks apple!
In 2020 use these subdomains : https://maps.app.goo.gl/pQAhDLJDNaYQJ9Np7
You can get it from your Maps app when you share the place.
Works on browser/Android/Iphone
This simple link is working great for me
<a href='https://www.google.com/maps/place/{{device?.gps_lat}},{{device?.gps_long}}' target="_blank">
Yep, tags like data-type etc. did not work for me as well. I used direct link from Google (you can choose "share point" and it will give direct html which will point to the location).
It will open google maps in browser.
For me, the best answer was to standardize a map tag, such as "MAP:".
Then to make an address invoke maps, preface it with MAP:.
So to tell a friend where something is, use something like: Map: 123 any street PA 98234.
Then when the address is clicked (for a phone, tapped), the default mapping app is invoked.
Added from comment:
The idea was for e-mail and texting, however if you want a code example, this works on android:
try
{
String uri = "geo:0,0?q=" + Address;
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(uri));
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
getApplicationContext().startActivity(intent);
}
catch (SecurityException es)
{
if (LOG) Log.e("Dbg", "Map failed", es);
}
catch (ActivityNotFoundException e)
{
if (LOG) Log.e("Dbg", "Map failed", e);
}
Usually u have to set up a little script + htmlpage on your server to run google maps,
but i was wondering - is it possible to use google maps directly?
i mean by just calling an url with parameters (gpoint coordinates, zoomfactor ..) and it loads the map fullscreen without having to use my own server?
Sounds like you might be after the static maps api. You can build a URL specifying the properties of the map like:
zoom
position
markers (including custom markers)
image size
etc
and you will get back a rendered image of the map. Something like:
Obviously this just gives you a fixed image of the map you are after. If you need a dynamic Google map, then you will need to use the Google Maps Javascript API.
Not hosted by Google. You might find some other website that uses the API to do the same thing.
Google Maps API