How to customize Gmap? - javascript

I am using Gmap on my website and I notice that i sets position:relative on the #map. How do I change this? I don't want any positioning on the #map div. I looked over the gmaps.js and couldn't find it.
Another problem is how to make the gmap load in satellite mode by default instead of map?
Also can I get rid of all the other things I get by default - zoomer, arrows, text at the bottom right etc. I just want a clean map in satellite mode.

Related

Mapbox control customize button

Currently I'm using drawing functionality of mapbox, but the button of start drawing is like other controls (like gps) are mapbox built in control buttons on the corner of the map.
Is there anyway that I can put the functionality to my cusomized button outside of the map component?
inspect the button and check the class name of them.
then put your map box in a div with {position: relative}, with your desired width and height
then give absolute position to your buttons..

In leaflet, how to set a marker to a fixed position on map?

For example, I want to set a leaflet marker always pin to the bottom-right corner of the leaflet map.
Does anyone have ideas about this?
There are a couple of ways to approach this, depending on what you want to accomplish.
This request for a centered "floating" crosshairs icon sounds very similar to your request. You essentially use getCenter() to create a fixed reference point, then use setLatLng() to update your marker's location relative to the map's center each time the user pans.
If the point you'd like to pin is purely cosmetic, you could just use HTML and CSS to position it on the page. This example, which is also referenced in the previous example, uses CSS to position an icon within a span as a visual reference point, then takes advantage of getCenter() to add lat/lon values to the form on the left of the page.
You can make use of getCenter(), getSize(), and L.marker() to pin to the bottom-right.
Reference: http://leafletjs.com/reference.html

Bing Maps custom NavBar textbox?

I'm interested in adding a textbox (and button) to the Default navigation bar in Bing Maps v7.
My intent is to add a place-name geocoder to help the user quickly zoom to a specific area on the map. (This is a service provided by Bing Maps API, I just need help adding the box to the control.) I can, but don't have to, use jQuery.
The website http://pietschsoft.com/post/2010/12/18/Bing-Maps-Ajax-7-Add-Custom-Navigation-Bar-Buttons-using-jQuery.aspx actually has some really great sample code showing how to add a button to the bar, though I can't seem to get a textbox to work properly. My suspicion is that Bing Maps is hijacking all of my key-presses to use for panning, etc., but I'm not positive.
Has anybody had any luck in doing this?
Thanks!
I solved the problem by putting an another div with the same background color and height, floating left at an x-offset of the width of the original navbar. The keypresses were being hijacked - it seems they've stolen all keyboard input for any elements that exist within the "Microsoft.Map" div. My div is one level higher up.
Here's how it turned out:
And if anyone's interested, the default height and color for the Bing Maps v7 navbar is 26px, #FAF7F5.

Google Maps: Relative to Fixed Positioning

The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.
The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.
I found a tutorial online, but it might be deprecated now? It wasn't working.
I had the same problem. All you have to do is create a DIV inside another.
Like this:
<div id="outDIV" style="position:fixed; top:0">
<div id="inDIV" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
I know this is way old, but maybe someone else coming along can get some info out of this one.
Yes, you can add another element encasing the map element, but if you want to get around that you can set a listener for a tilesloaded event and then undo what google's done.
In api v3, you can do it like so:
google.maps.event.addListener(myMap, 'tilesloaded', function(){
document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});
I'm sure there are issues that go with setting a position to a map beyond what google likes, but if you want to keep the number of elements in your document to a minimum (you should really want to), this would be the way to do it.
(edit: adding quotes)
You just needed to pick apart the specifics of what Yelp was doing a little more, I think... their column is floated as well (examine their markup... it's #searchLayoutMapResults), but then inside that, the div #searchLayoutMapResults is the one that gets position: fixed added to it (via the className fixed), so it doesn't change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.
(the markup I found was based on this page)

Bing Map CSS position:fixed InfoBox issues

I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.

Categories

Resources