Embed mymaps on website with possibility to see current position on mobile - google-maps

I want to embed "my maps" to my website using iframe, but I want to let my clients to open that map in a new window and see their location on it.
If I open my map in edit mode on my phone: www.google.com/maps/d/edit?mid=*** I see my position, if I change the mode to "view" it stops tracking my location.
Is there a way to open the big map and to see the current position? It's very useful... Maybe there is another way to embed it...

Based on the documentation
url: https://developers.google.com/maps/documentation/staticmaps/intro?hl=en
it seems that it is not possible to get the current location (position of the client) using the parameters which go along with the url. This means that you can not use iframe and embed google maps inside it to get your current position.
However, you can still use geolocation and program it to get the user current position on the map,
url (code included in the link): https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
Bare in mind that the google map API will always ask you the permission to access data in order to locate you.

Related

Google map zoom parameter in url not working

Why doesn't google map z (zoom) parameter work inside the url?
I' ve searched over so I got few solutions for sending zoom parameter in google map url but based on the old posts (stackoverflow) which deal with the zoom level within the url it seems that this functionalities do not work anymore.
I've used the following z parameter but it's not working:
http://maps.google.com/?q=38.6531004,-90.243462&z=12
Below is the link where they have mentioned z parameter for zoom level
link
For those who do not want to read,
this works (z range:[1-20]):
https://maps.google.com/?q=38.6531004,-90.243462&ll=38.6531004,-90.243462&z=3
There is no documentation that covers this problem. However, there are few hacks.
The link that you have provided,
URL (stackoverflow):What parameters should I use in a Google Maps URL to go to a lat-lon?
Will not help you with getting the desired google maps zoom level inside a url
The following examples which have been working for quite a while DO NOT WORK anymore (they work but without getting the desired zoom level)
Examples:
http://maps.google.com/?q=38.6531004,-90.243462&z=3
http://maps.google.com/?q=38.6531004,-90.243462&zoom=3
http://maps.google.com/maps?q=Scottish+Rite+Hamilton+ON&loc:43.25911+-79.879494&z=15
Instead, you can get the zoom level easily by trying the following examples:
https://www.google.com/maps/#38.6531004,-90.243462,9z
https://maps.google.com/?ll=40.7060471,-74.0088901&z=3
(Note: after clicking on google maps you will get a gray marker which appears and quickly disappears)
However the above URL's will not give you a static pinpoint for the specified lat&long.
There is a "hack" on how to get a fixed pinpoint (red marker pin) and that is by giving the q attribute (represents the search query) and the II attribute(latitude and longitude of the map centre point) along with the z (zoom attribute)
Example (with the OP coordinates):
https://maps.google.com/?q=38.6531004,-90.243462&ll=38.6531004,-90.243462&z=3
If you want to change the zoom level just change the value of 'z'.
After searching the web I found that only this website:
https://moz.com/blog/new-google-maps-url-parameters
deals with google maps parameters/attributes/arguments, where things actually still work. If anyone want's more functionalities within the url, then this is the site to check.
Zoom intervals explained (https://developers.google.com/maps/documentation/static-maps/intro#Zoomlevels):
The following list shows the approximate level of detail you can
expect to see at each zoom level:
1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings
This works as of 5 Aug 2018
http://www.google.com/maps/place/<lat>,<lng>/#<lat>,<lng>,<zoom>z
For example
http://www.google.com/maps/place/49.46800006494457,17.11514008755796/#49.46800006494457,17.11514008755796,7z
As of 04/2020 ...."because google is always changing and evolving"
In complement to Eugen Sunic comments above, and an alternative update to the Solution.
When Logged in to google and getting map data from the google generator, it is not the same as copying the URL from the browser window (which my may be manipulated to load different zooms trough the various alterations, html, Css and script tricks).
But in the below, keep in mind that Your address info may need to be part of the google array of database, eg you have some address map info linked to your account, images, business name, etc. or not... maybe just typed in for a quick map search with a pin-point... the later I don't know.
Also the below is not some Google API pay per 1k clicks thing, which is more geared to the commercial development end of google tracking heat maps, etc. So if you just need a simple solution and certain zoom and marker to work..then you might try the below.
When logged in too your Google account (maybe not) and showing your location marker on the map screen...
Choose the zoom detail of the map you want to appear in your web page. eg Whole US, State views, City, Street (by clicking the + or - zoom feature).
Then go to the hamburger menu to the left, and look down the list for "Share or Embed Map" and the popup window should load the same zoom level of the map! Do not try to change the zoom in the popup window feature, it wont work to change the link code but will change the pop up windows zoom of the map. In short, the embedded link code is preset and will not change in the popup.
Above this popup window of the map there will be two options at the top (Share and Embed) button/link selections.
Click on the Embed link/button and it should generate the code for the zoom you previously chose.
Lastly, copy the code, paste it into your web page and TEST!
As far as I can tell, There is no altering this code as the others suggested above, changing(z=3, 9z, etc) as the code is entirely different. But it will allow you to get the zoom you need "if the google code generator or procedure does not change".
But the zoom level was altered and good enough for me when I figured the process out. Changing it to other zooms is another can of code.

Current Location in Google Maps using only a URL

So I would like to use a URL to retrieve and display ONLY the users CURRENT LOCATION.
For example: A user with a smartphone (iPhone, Android, etc) opens a link [http://maps.google.com/CURRENTLOCATION] on their phone, and it shows their current location on the user's device in either Google Maps app or browser, as reported by their GPS/wireless location. The actual link itself should should remain static, and display the location wherever they are.
Is this possible?
Thanks in advance!
If you have the lat/long coordinates (which I suppose you get through the gps/wireless device), you can use something like this:
http://maps.google.de/maps?q=loc:48.0000,9.000
which opens the Google Maps website with the coordinates N48.0 E9.0 (as decimal coords) centered.
Or, if you need a static map (and not a full fledged JavaScript map), use this link and adjust the values inside the URL:
http://maps.google.com/maps/api/staticmap?center=48.00,9.00&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|48.0,9.0&sensor=true
Valid values for the arguments are:
for maptype: roadmap, terrain, satellite
for zoom: 1 to 20
This is discussed front and center in the Google Maps geolocation API: Detecting the User's Location
According to the documentation, the user will need using an HTML5 equipped browser for this to work. You will need to write the Javascript which looks pretty vanilla.
Edit: This only works if you are using your own domain and have implemented the Maps API (which is really simple), not Google's own maps.google.com

How could a share a Google map mashup with my own datapoints and links back to my site?

I currently have a map mashup that has locations that I'm populating from my own database. A few users would like to also show that map on their site(s). I'd like to give them the ability to do that, but would like to retain the actual functionality of the map on my own site: like add "stuff" to places on the map through my a web form on my site. I could open the entire API to allow them to create their own form along with the data points, but most of the people wanting to put up the map aren't developers, they are just enthusiasts that have put together a personal page that they want to spice up.
I was thinking I could just provide a JavaScript of some kind that they could then take to place on their site, or maybe an IFRAME of some type, or...any ideas? Anyone implemented this? TIA.
I haven't done anything like this myself, but I think your idea to utilise an iframe is on the right track. In fact, this is how Google Maps generates its embed code.
Your app will need to generate a URL with all relevant Google Map parameters such as bounds, zoom level as well as your application-specific params. Any event that triggers the map to re-draw (drag, zoom, etc.) will generate a new URL.
If you try the embed link in Google Maps as an example, it generates a URL that looks something like this:
http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17
This URL can then be wrapped up in an iframe which your end users can place on their web pages.
Re: resizing
Yes, it's possible to dynamically resize it if width/height is part of your application params that generates the embed code. Again using Google Maps as an example:
<iframe
src="http://maps.google.com/maps?f=q&source=s_q&sll=45.434035,12.339057&sspn=0.003294,0.004812&ie=UTF8&ll=45.432724,12.338966&spn=0.006588,0.009624&t=h&z=17&output=embed"
width="(width-param)" height="(height-param)"></iframe>
If you mean resized by user, after it's been displayed, I'm not sure.. most likely, yes.

How to use map created from MyMap into our application?

I am creating a custom map into MyMap link on google map for creating our own map with adding various placemark points &/or lines.
see http://maps.google.com/maps/ms?ie=UTF&msa=0&msid=
113225627012396411583.000478b8658fde4ac307b
Can I use the url getting from crated map into our application to show it programmatically with adding some points through application with javascript instead of using following url:
http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcl
Regards,
Girish
One thing you can do is go to the MyMap and grab the URL from the "View in Google Earth" link on the bar at the top of the map.
Then you can use that URL in a GGeoXml call in the Google Maps API.
Another thing you can do is go to the MyMAp and click the "Link" link on the bar at the top of the map. If you feel like it, use the "Customize and preview embedded map" option. Then grab the displayed HTML and paste it into your website.
In both those cases the data is dynamic. Future changes to the MyMap will be reflected on your website, after a few hours delay due to caching on the Google server.
If you want more control, then you'd need to consider third party extensions to the Google Maps API, such as EGeoXml, GeoXml or GeoXml3. In which case the data would normally be static and not reflect future changes to the MyMap, but you could write your own server-side code to refresh it.

Do i need use google maps api only to embed litle map with route calculator/display for only one destination?

Well i want to upgrade contact page with dynamic map showing location and give oportunity to calculate route for comapny headquatters. Id it necessery for such simple task use Google api? i mean here generating akey etc? Fo i have any other alternatives to google maps?
There's really no reason to mess with the API at all unless you need to customize the appearance or behavior of gmaps. Why not just use an iframe with a url of:
http://maps.google.com/?q=[you-url-encoded-address-here]
or better yet, set up a textbox and a 'get directions' button to redirect that frame to:
http://maps.google.com/maps?saddr=[their-address]&daddr=[your-address]
edit: this works well in modal dialog if you don't want the google logo sticking out like a sore thumb in your pageflow
You could probably embed directly with a specific URL that will configure it to have the destination you want.
By the way, well written answers are much more likely to receive useful responses here.
You could consider http://www.openlayers.org/ as an alternative to google maps.
In fact open layers can be used to add a Google map, or an OpenStreetMap map or a Bing map, etc.