I have added a Google Maps Javascript API (dynamic map) to my web-site. I want to put a static picture in the bottom left corner over the maps div - something like a legend. It will not move when the user scrows around.
Is there a way to do it through Google Javascript API or shall I just add a div, put it over the map with CSS?
Yes, there is a way to add this sort of thing using the Google Maps Javascript API. It is considered a Custom Control, and here is a link to the documentation. You would do that if you need to have your element move around when screen real estate gets tight and you want Google Maps to take care of it.
If you aren't concerned with reflowing the other controls as the map appears on screens of various sizes, you can just go with an absolutely positioned element. If you don't want your overlay to affect the map ui by capturing mouse events, just set pointer-events:none; on that element.
Related
Hi there I tried googling extensively but nothing seems to help.
This is my scenario:
Company logos are stored on an external domain/url (rectangular in shape).
Ionic application with a google map that places these logos as markers onto the map.
The markers look ugly and I want to make them round on the map.
I have found that if I add css to the entire page to say:
img { border-radius: 50%; }
Then it rounds the images but also rounds the map background. I cannot specify the image url to style in css as each logo url will be different. How can I achieve this via javascript alone or how can I assign a css class to each map pin?
EDIT: Just to specify, I added such a generalized css styling because when I inspect the element then the map pin is part of the canvas and does not show up for me to inspect. As mentioned above I would love to assign a css class to the pin so that I can target it directly.
You can create custom markers, using your own images..
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom
And try here:
https://m.youtube.com/watch?v=ZtNrt9vRt10
That should get you started..
#MikeCave's suggestion is great. I especially like this because high resolution screens will display markers better since Google Maps is constricting about multiple resolutions.
As the comment above, you need to be more specific if you're going to apply a general rule to all images like that. You can specify iframe img to get more specific since Google Maps puts the map inside an iframe. Better yet, check out this answer to see about adding a class name to markers for better targeting.
I was able to achieve this with the plugin MarkerWithLabel. Then by placing the image in as a label under the marker I could hide the marker by defining the icon url as an empty string and then placing the image url into the label, the label then has a css class that I could manipulate via css.
Basically what I am trying to do is find a way to load ONLY one image/tile which will fill the viewport and not have any surrounding tiles loaded. It appears this is the methodology the good folks at Weather Underground are doing w/their Wundermap.
I've tried digging through their code but to no avail. I tried simply using larger tiles - larger than the actual viewport - but this has several adverse side effects. There was a similar question asked in WMS as a single tile image in Google Maps v3 but that was more about just using larger tiles than using a single tile.
Thanks in advance.
UPDATE:
Here is a link to a page/map on their site that loads a single tile/image that spans the entire viewport:
http://wxug.us/o4ia
If you have the Net tab open in firebug you can see that there is a single tile request. Also, if you keep it open and pan the map - while keeping the mouse down - the data does not fill in until you release the mouse. For all the tiled maps I have seen, as soon as you pan, it starts filling in new tiles.
They're using a custom overlay. You'll need to set up a server-side way of serving out your own image overlays to display on Google Maps, based on the viewport (presuming you want to serve 1 image that displays over the entire viewport). http://goo.gl/zgEKB
Unfortunately, on a site that I'm working on, the StreetView image of the business premises is out of date and not very flattering of the business.
Is there any way to make (via the Maps API) the map image a static image, which doesn't link to the full Google Maps page showing the StreetView image?
I'm trying to avoid manually embedding an image as I want to be able to do this programmatically.
Thank you.
Prembo.
I found a really simple solution to this, in my case I wanted an interactive map on desktop and a static map on mobile.
Using media queries I added the attribute {pointer-events: none !important;} to the parent div wrapping my map when changing to mobile.
Yep, take a look at the static maps api. There is an example of exactly what you need.
https://developers.google.com/maps/documentation/staticmaps/
You could style the map so it can't scroll, zoom, street view... etc.
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
I'm putting together an app that will show a news item's location in Google Earth using the javascript api. This is working great but we want to prevent users from manually dragging the globe around.
I know for Google Maps there is a function disableDragging which accomplishes this, but in the Earth api I could find no similar function.
I also tried placing a (nearly) transparent div over the GE container but any div with a non-solid background disappears over the container.
There is a standard method in the Api to disable mouse control of the globe.
// where ge is an instance of the plugin object
ge.getOptions().setMouseNavigationEnabled(false);
Here is a working example.
I am not 100% sure what you mean with 'transparent div over the GE container' but perhaps the iframe shim technique is what you are looking for?
Slippy maps are web widgets which allow the user pan around a two dimensional plane by grabbing and dragging it. This control was made popular by Google maps, and can be seen on many modern mapping systems today. It's obvious as you watch them load that they are actually a grid of images which are loaded as-needed as the user pans. My question is; how are those images aligned, moved, and dynamically loaded in HTML/JS/CSS? Are they divs with background images? Are they loaded into a parent div with overflow:hidden? What strategies do they use to keep from leaking memory as the user pans around. Are there any third party libraries that make it easier to build them. I'm not interested in geographic maps persay, just the interface that's commonly used to display them. Thanks!
Normally a grid of image elements are moved around, and as some move off the end of the viewer and become hidden they are moved to the opposite side of the grid and the src attributes changed to point to the new map tile.
All these, as you say, will be loaded into a parent element with overflow:hidden;
In terms of examples you can look at the open source Open Layers implementation:
http://openlayers.org/