I'm trying to add a "static" panel on the top left of my map (like the image below)? I am using google.maps.Marker() to render a marker on the map and upon clicking the Marker the panel should update with the place. I've seen it in several sites, so I'm wondering if it's possible to do using the Maps API. I've tried looking through a bunch of things (including CustomSaveWidget) though it is not the same thing.
Related
I am using a WordPress plugin for a Store Locator, and it does a lot of good things. But there are a few things that I need to tweak and I do not want to modify the plugin's code. I was wondering if there was any way to get ahold of the current map that it outputs and all of its settings so that I could manipulate them, or add to them? I would do this in my own JS file.
The ID of the div that contains the map is #wpsl-gmap and one thing I want to do is after loading the results I need to trigger a resize on the map because the area that it is loaded into increases and the tiles do not load for the new section. I would also like to center the map if possible.
I'm developing a small app using Google Maps javascript API v3 where I need to display 2 markers and update their positions using ajax. I found no problem in doing it using Google Maps Markers, but I need a more customized marker so I'm using Google Maps custom overlays and I can't find the way to make the movements smooth.
This is the design of the markers (that also uses css animations, so I need custom html):
Markers design
The problem I have is that I can't find a way to actually move the custom overlay on the map. What I'm doing now is removing the overlay and creating a new one every time I have to move it, what makes a little blink and don't allow me to make a smooth transition from one position to the other.
So here are my questions:
1- Is using custom overlays the best way to build the markers according to the design? Is there any way to make Google Maps Markers look like the design?
2- If using custom overlays (https://developers.google.com/maps/documentation/javascript/customoverlays) is the best option, is there another way for moving them that is not removing and creating a new one?
Thanks in advance!
After struggling with this some time (it really took me several hours) I have manage to do it getting inspired by this fiddle:
https://jsfiddle.net/doktormolle/QRuW8/
The functionality is not the same, but I could get some ideas.
Since there is not a lot of documentation I have created my own fiddle with a working (and simplified) example, just in case is useful for anyone:
https://jsfiddle.net/javigbas/3zx5xa2u/
:)
i have used angular 2 google maps library in my porject to show google maps.
i have multiple markers in my map whose positions are changed frequently whenever a marker changes a position it jumps from one location to another location.i want to smooth movement of marker between two positions.
i have used https://github.com/terikon/marker-animate-unobtrusive this library in my js google map api and working fine but i tried to use the same library with this google map api but dont know how to do it.
i have included the cdn link in my html code and globally initialized the smoothing library but nothing is changed in my map.
is there any better approach to smooth markers movement?
Hi Pardon me if this is repeat question or obvious one as i am new to programming
I am trying to implement an angular google map using this api. it has a property called options boxClass,boxStyle,content,disableAutoPan,maxWidth,pixelOffset,alignBottom,position,zIndex,closeBoxMargin,closeBoxURL,infoBoxClearance,isHidden,visible,enableEventPropagation as different values(seen from the JS file.)
Now i want to know what each one of those will do as it is not specified in their documentation. and mostly i wanna know how i can make the info window to appear on rightside of marker like shown here I designied the html for the infobox and when i give boxClass as the option the infobox is rendered properly but is displaying below the marker. i want it to be to the side of marker.
EDIT: let me clarify on certain points. I mainly wanted to know
1.how to remove the default close button and replace with mine. (which function to call for it to work )
2.how to use pixelOffset or another property to help me display the infobox to the side of marker as in example above without using margin or padding. gmaps api v3 specify the pixelOffset to be of type size. i tried various ways to offset the infobox so that it will shift but it seems i am using it wrong as the box either wont change its position or will be displayed at the top of map irrespective of the marker.
A lot of them are CSS properties that changes appearance and not really maps term. You can google them or learn from here.
I want to put a Google Maps map on our website.
I know that custom markers can be added to a map with Javascript, but I'd rather use Google's MyMaps service instead, because then my co-workers could edit the map without any programming knowledge.
You can add a custom My Map to websites with an embedded iframe. I'm using the Javascript API instead though, so that I can take advantage of the controls the API delivers (such as zoom through custom controls or changing the position on the map without touching the map itself).
Can I insert the map created and saved with My Maps as a layer in my JS API map?
You can use GGeoXml to add My Maps content to your API map.
In your My Map there's a "View in Google Earth" link, use the URL of that link as your GGeoXml URL.
The link generates an indirect "network link" reference to the data, so the map on your page will reflect the latest changes made to the My Map.
The downside is that there's a limit to how many markers you can place on one page of a My Map, and the "View in Google Earth" link only returns data for the current My Maps page.
Another strategy is to use GeometryControls in your own API map.
That involves a lot more coding effort on your side. It gives the same look and feel to your co-workers, so they still need no programming skills. The advantage is that it bypasses the My Maps limit to the number of markers that can be displayed at once.
Apparently you can embed the My Map you created in your website by using the Link To This Page functionality as described here.