And by custom map I mean custom map tiles, as in, mapping another planet. I've looked all around but can't see to find any resources pointing how to do this on Google's or any website.
I know it's possible because I've seen it done before on a website, but unfortunately the website that has the link to THAT site is down so I can't get to it.
Have a look at the API. This might help you by loading own images as an overlay:
Image Map Types
Implementing a MapType to act as a base map type can be a time-consuming and laborious >task. The API provides a special class that implements the MapType interface for the most >common map types: map types that consist of tiles made up of single image files.
This class, the ImageMapType class, is constructed using an ImageMapTypeOptions object specification defining the following required properties:
tileSize (required) specifies the size of the tile (of type google.maps.Size). >Sizes must be rectangular though they need not be square.
getTileUrl (required) specifies the function, usually provided as an inline >function literal, to handle selection of the proper image tile based on supplied world >coordinates and zoom level.
Related
I am planning the development of a map service, where I'd like to display a list of markers on top of a custom "base layer" consisting in vector tiles rendered with TileServer-GL.
I understand that TileServer-GL render vector tiles based on an .mbtiles tileset and style with a .json style file made for instance with Maputnik.
When comes the step of displaying that into an interactive map, for instance with Mapbox GL JS, I understand that you can specify the tiles served by TileServer-GL as a third party source (https://docs.mapbox.com/mapbox-gl-js/example/third-party/), but it seems that you then need to add layers one by one, and specifying the style of each layer. But I thought that's what the tile server already does! Have I misunderstood anything?
Thanks for your help
I'm not exactly sure what you're asking, but basically you will:
Construct a Mapbox GL style file (.json) which refers to all the layers you have created, where they are hosted, and how you want each of them displayed.
Initialise a map object that loads that style file:
const map = new mapboxgl.Map({
// ...
style: 'http://localhost:8000/style.json
});
I'm trying to create a tiled grid using google static map images. I use the latitude and longitude in the middle of the tile to request the images (Math found here).
They line up perfectly but whenever a label is split between two tiles, the second tile does not show the label
Label names cut off
Is there any way to format the url such that the images returned are consistent with inter-tile labels?
Your implementation is against of Terms of Service. You should be aware that stitching static maps images is prohibited in paragraph 10.5 (b) of ToS.
No derivative works. You will not modify or create a derivative work based on any Content unless expressly permitted to do so under these Terms. For example, the following are prohibited: (i) creating server-side modification of map tiles; (ii) stitching multiple static map images together to display a map that is larger than permitted in the Maps APIs Documentation; or (iii) tracing or copying the copyrightable elements of Google’s maps or building outlines and creating a new work, such as a new mapping or navigation dataset.
Google recently updated Terms of services, but you can find the mentioned text in
https://developers.google.com/maps/terms-20180207#10-license-restrictions
I need to draw some graphics over google maps. Graphics is not always transparent, so I'd like to draw text labels (country names, city names, etc.) over my graphics.
For graphics I use overlay map type , it is shown over base map. But I failed to draw labels over it?
I guessed that there shall be a way to draw base map twice, with different style settings (so I style map with not labels, put my overlay, and then put overlay with roadmap with labels only), but it does not seem like I can use basic map types as overlay ones. Another way I see is to manually get tile with labels only by composing URL. This works, but as far as I understand accessing map tiles directly is prohibited by ToS.
Is there a working and, well, legal way to do that?
Here is jsfiddle which illustrates URL composing solution: https://jsfiddle.net/GRaAL/jyr81p2c/
// here is how I get google maps tile with labels only
function getLabelsOnlyTile(coord, zoom) {
return "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i" + zoom + "!2i" + (coord.x) + "!3i" + (coord.y) + "!4i512!2m3!1e0!2sm!3i353022921!3m14!2sen!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLmU6bHxwLnY6b24!4e0";
}
I found that StyledMapType could be used as overlay map type (have same interfaces), so I created StyledMapType with labels only and instead of registering it in map type registry just added it as overlay, this way:
var onlyLabels = new google.maps.StyledMapType([...], {name: 'labels'});
//draw useful data over map
map.overlayMapTypes.insertAt(0, new UsefulDataOverlay());
//and then draw labels over it
map.overlayMapTypes.insertAt(1, onlyLabels);
Full working example is here: https://jsfiddle.net/GRaAL/jyr81p2c/2/
You might want to check MapLabel for Google Maps V3:
This library allows text to be added to the map at a particular location. Note that the user's browser must support Canvas for the label to be displayed.
MapLabel class
This class extends OverlayView.
Note that browser <canvas> support is required for the label to be displayed. Analytics
Source:
https://github.com/googlemaps/js-map-label
How to add text label in Google Map API
Hope this helps
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 have a gmap object that is created by a JSF components (PrimeFaces p:gmap) and it might have some Overlays (Markers) attached to it. So my own client-side javascript doesn't have a direct reference the Overlay objects.
Is there some way where I can get a collection of all the Overlays currently painted on a map?
with v3 of the Maps API, no. There is no documented method to do this.
A internal array somewhere might hold it, but you couldn't rely on it ( and its obfuscated short name would change with each release).