I created a public map using my Google Map. I want to set a default zoom level, but it is not saved. Is this possible?
Also, is it possible to change the list of place markers?
the reference map that you supply (quebec summer festival) is called by the URL: http://maps.google.com/maps/ms?source=embed&hl=en&geocode=&ie=UTF8&msa=0&msid=112492115201367239282.0004609e0fcc239c4f792&ll=46.81084,-71.217113&spn=0.02056,0.038624&z=15
notice that the last parameter "&z=15" defines the zoom level (in the embed map code, "&z=15" becomes "& a m p ; z = 1 5" [remove spaces between letters]). if you change this you can increase or decrease the zoom level. if you suppress the zoom level, googlemaps will automatically calculate a zoom level when displaying said map. NORMALLY this leaves some of your map outside the frame.
so, just by supplying the URL with the desired zoomlevel you have solved your problem. this works very well with static maps. if you have a dynamically generated map (from a database, for example), the fastest solution is to put 2 markers (top left and bottom right corners) slightly outside your boundary box. this will force automatic zoom in the desired amount (hopefully).
Not using API just made a map points using my GMail account and made it public, like the following site:
http://maps.google.com/maps/ms?source=embed&hl=en&geocode=&ie=UTF8&msa=0&msid=112492115201367239282.0004609e0fcc239c4f792&ll=46.81084,-71.217113&spn=0.02056,0.038624&z=15
Nothing is saved by a web page. HTML browsing is stateless. If you want to save some information you will need to use similar trick as any other web applications. E.g. putting it in cookie and the setting the zoom level using the information in the cookie when you initial the page.
Related
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.
First, I have been reviewing some of the different Google Maps API docs, but I've never done much coding with it. I'm trying to build a simple game for kids in which, if the user clicks on a map within a certain distance of a key map point (could be within 1 mile, 100 yards, 5 miles...depending on situation), then the map point becomes visible and a custom message is displayed with it.
Which google maps api calls would enable this to work? How would I embed a hidden point on the map? With the map being rendered on the client, for security, if I could detect the point clicked and send that point via ajax to the server, then the server could send back whether there is a hidden point at that location, that seems like it could work. Or maybe there's a better way.
Can someone point me in the right direction, as to which API calls, and maybe code samples if possible? To summarize, I'm looking for the following functionality:
Track the lat/long coords of any user-clicked point on a google map. Have that click send the coords to my javascript function.
Have hidden points on the map that the user can't see, but either Maps (or at least just my server via ajax) can be aware of.
Ability to display a custom message right next to the clicked spot or hidden point, when needed.
Thanks!
When I understand correctly what you are trying to achieve it's much easier.
Draw a circle and hide the circle by setting the strokeWeight and fillOpacity to 0 . As radius use the allowed distance, as center the LatLng of the point
Although the circle now is not visible, the API will still respond to click-events on the circle, you only have to set a click-listener for the circle and create e.g. a marker at the center of the circle.
Note: a clickable circle will have a different cursor, you must set a unique cursor for the complete map, otherwise the users will be able to find the circle by hovering the map.
Demo: http://jsfiddle.net/doktormolle/0secbwuf/
I need to show a set of markers on a Google map.
I know markers can be added directly on a Google map but given that I have 3 sets of markers, one for shops, one for parks and another one for hotels, how can I show them on 3 different layers and so that later on using javascript, I be able to hide one set of markers by doing sort of:
myLayer2.setMap(null);
I have checked Panoramio layer but it needs the images first to be uploaded to panoramio, but in my case for some particular security reason I cannot upload them to panoramio. I will have images locally and set those at runtime based upon some criteria.
Is there some way to do layer based work without using panoramio approach?
The Maps-API doesn't support this kind of custom layers(as you maybe know them from other map-API's like e.g. leaflet).
But it's not hard to achieve a similar feature.
You may use a google.maps.MVCObject. for every "layer" create a property for this MVCObject and set the value of this property to null or the google.maps.Map-instance(
depending on the desired initial state of the "layer")
var myLayers=new google.maps.MVCObject();
myLayers.setValues({parks:null,shops:null,hotels:map});
//hotels initially are visible
When you want to add a Overlay...e.g. a Marker, to a "layer", bind the map-property of that Overlay to the related property of the MVCObject:
parkMarker=new google.maps.Marker({/*options*/});
parkMarker.bindTo('map',myLayers,'parks');
To toggle the display of all features within that "layer" you only need to set the property of the MVCObject:
//show the parks
myLayers.set('parks',map);
//hide the hotels
myLayers.set('hotels',null);
Demo: http://jsfiddle.net/doktormolle/UA85N/
In years past, it was easy to remove the info window from an embedded Google Maps. Just add iwloc=near in the query string.
In the past few weeks, Google has migrated to a NEW embed query string format, to coincide with their new Maps product.
Does anybody know how to hide the info bubble with the new query string? I do want to keep the marker icon (obstructed by the info window). I tried including iwloc=near before the rest of the query string, but that did nothing. I don't see any option on the new Embedded Map builder, either.
<iframe
src="https://www.google.com/maps/embed?iwloc=near&pb=!1m20!1m8!1m3!1d3246.3028987305834!2d-97.52973594999999!3d35.5462208!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e6!4m0!4m5!1s0x87b21a2b843c4d5f%3A0xd6deac9724fb9935!2s7316+N+Western+Ave%2C+Oklahoma+City%2C+OK+73116!3m2!1d35.5462208!2d-97.5297267!5e0!3m2!1sen!2sus!4v1394217557679"
width="420"
height="200"
frameborder="0"
style="border:0">
</iframe>
Here is what is output. Note the info window, bordered in red, that I wish to remove.
It looks like they've overhauled the way the embedded maps api works...
From the new docs, it looks like you can definitely remove the bubble by making request in "view mode" instead of "place mode". However this will result in no marker either.
It doesn't have much to say on what options are supported for place mode, but you might try updating your URL to the new place endpoint and then experimenting with some of the legacy options.
Update
I tested it myself using the new google.com/maps/embed/v1/place/... endpoint and it doesn't work if you add &iwloc to that. In fact, it will throw an error about the unsupported parameter.
Unfortunately, it appears that the new API only supports these parameters:
The following optional parameters can be used with any of the map
modes listed above.
center defines the center of the map view. It accepts either a
comma-separated latitude and longitude value (such as
37.4218,-122.0840) or a place name or address string (such as Champ+de+Mars,Paris,France).
zoom sets the initial zoom level of the map. Accepted values range
from 0 (the whole world) to 21 (individual buildings). The upper limit
can vary depending on the map data available at the selected location.
maptype can be either roadmap (the default) or satellite, and defines
the type of map tiles to load.
language defines the language to use for UI elements and for the
display of labels on map tiles. Note that this parameter is only
supported for some country tiles; if the specific language requested
is not supported for the tile set, then the default language for that
tileset will be used. By default, visitors will see a map in their own
language.
region defines the appropriate borders and labels to display, based on
geo-political sensitivities. Accepts a region code specified as a
two-character ccTLD (top-level domain) value.
Sorry to be the bearer of bad news.
Try entering latitude & longitude coordinates instead of address. Was just now pleasantly surprised it generated the iframe code without address block overlay.
I need to create a 80x80cm (or 33inchx33inch) map with Google Maps. This map will be printed and exhibited, so the higher DPI the better. Actually, in printing, a 300DPI is the minimum.
Now, I'm using the Javascript API in order to create the map I want :
- change the mapOptions with an array of styles with various colors
- add a Transit Overlay in order to have the map of the urban trains added over the map (see this aautar.digital-radiation.com/blog/?p=3761)
- add polygons as a link to KML URL to one of my maps
If you want to see the result : http://www.tellnet.fr/blog/test.html (it's very long to download since it's a 5000x5000 picture).
The problem is that, at the Scale level I want (with not too many details), the big picture I get is a 5000x5000, which gives a 150DPI only printable file.
To obtain a 10000x10000 picture as I would to print a 80x80cm map at 300 DPI, I need to :
- either my map zoom once, but then I've got soooo many details, that will be printed super tiny
- or change the DPI of the map, asking Google Maps to double it.
It would basically give me the same map at the same scale, but with thinner lines and texts (making a 10000x10000 pictures).
I know this is possible with the static maps Api, change the Scale value to 2 (see https://developers.google.com/maps/documentation/staticmaps/?hl=fr#scale_values).
The problem is that, this is the static maps API, so please can someone tell me if :
- it's either possible to do all the above things with the static API
- or change the "scale" value (ie the DPI value) with the Javascript API.
I also tried to change the meta viewport value, but this only works with mobile devices... (I searched for all solutions, now I'm blocked!)