I have this Google example code here, http://jsbin.com/EpujIcU/2/edit?js,output which is a polyline "route" with two normal markers along the route:
What I really would like is if I can tweak the marker, so it looks a lot nicer (small circle) - fx. like this picture:
The custom markers should still be clickable so I can put an info window to it.
I do know of the possibility of custom markers, but it doesn't place the marker in the middle of the line but instead in top (yes, my icon is badly draw):
Is it possible to get as I want in the middle picture?
Yes. You need to configure the anchor custom icon correctly.
icon: {url: "http://url/icon/png", anchor: new google.maps.Point(12,12)}
Related
I'am using reactJS and want to design a component with following functionality :
Display pixelated image which is able to zoom in and zoom out at pixel level.
When clicked on image , display a marker- which can be a dot or icon at specific position.
When image is zoomIn/zoomOut, marker size and position should not change.
Even after zoomIn/zoomOut when clicked on image, marker should get repositioned at proper pixel on the image.
I am thinking of applying same logic as used in the maps/ leaflet. Like they maintain separate layers for map and markers on the map. If we zoomIn/out maps it won't affect the marker position or size, same functionality I want for the image.
Anyone with the solution or related library will be welcomed !
(For reference, I want this design for marking GCP(Ground Control Points) on the image, which requires very precise marking at pixel level)
So I am using gmap3 to dynamically load my map marker icon based on user image profile photo. Ideally, I want to have some custom styling on the marker icon image, and each marker icon image is different from user to user.
Here are two difficulties I have encountered:
Google map load marker icon as canvas (correct me if I am wrong), so it is not an image tag on DOM, thus I don't know how to add css styling to it
Even if it loads it as image, I couldn't find a way to define a callback function with gmap3 (and use jQuery to style the image selector) when the custom icon is completely loaded on DOM. (I tried liveQuery, it's a horrible idea, and I've tried google.maps.event.addListenerOnce(map, 'idle', function(), which didn't work out well.
Here are some of my approaches:
I added animation property to the marker, and pass a random string to that (which should produce an error), and this makes icon loaded as an image tag on DOM.
I then use setTimeout (because I do not know where to define callback function on gmap3 after the marker is loaded) to select image css, and add a background-image css property to that transparent icon image, so I can have a custom user profile image on marker
Please help
to apply css on a marker, you can try the following method to include var marker = new MarkerWithLabel. Link
I'd like to position my custom marker on MapQuest, because location is poiting at the middle of the icon, not at the bottom of the icon (icon is a image of "pin").
var icon=new MQA.Icon("/images/market.png",30,70);
locator.setIcon(icon);
map.addShape(locator);
Thanks a lot in advance
Disclaimer: I work for MapQuest.
You can position custom icons using the setIconOffset method on your POI. Here's a quick example:
var myIcon=new MQA.Poi( {lat:39.739217, lng:-104.984861} );
myIcon.setIcon(new MQA.Icon('img/arrowicon.png', 72, 87));
myIcon.setIconOffset(new MQA.Point(-43,-72));
The first number you pass into MQA.Point is essentially the CSS left offset of the icon, while the second is the top.
If you need help, don't hesitate to comment back or check out the Forums on the MapQuest Developer Network.
I understand that google.maps.Marker can have a title set to them in their options, can the same be done for google.maps.Circle?
I've tried just setting title on the google.maps.CircleOptions object, but that doesn't seem to do anything.
Is there a way I can give the circle overlays a title? I imagine there is, as when you hover over a circle, the cursor is changed to pointer so there must be some kind of detection there. I don't want to make my own custom tooltip and attach it to the hover event on the circle, I want to use the browser's built in title hover.
Circles:
https://developers.google.com/maps/documentation/javascript/overlays#Circles
CircleOptions object: https://developers.google.com/maps/documentation/javascript/reference#CircleOptions
It is not currently possible to add a title to a circle. As you can see from the CircleOptions, it doesn't list 'title' as a option that you can use.
A work around could be to listen to the mousemove event on the circle then to show your own title as a custom OverlayView
I have been searching on the Google Map API V3 documentation but I could not find any way to use my own html content instead of an image to create a custom icon on the map.
I would like to display a dynamic marker that can display text or anything I want.
For exemple :
<div class="marker">Dynamic text</div>
I have seen this thread google map api v3: can I use a div instead of an image to create the custom icon? where someone advice to use "Custom Overlays" but in the documentation it only displays an image... I don't see the point of explaning how to display an image with "Custom Overlays" if it is done to display html content.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays
How should I proceed then ? Should I use Custom Overlays ? There is not anything that seem easier to do that ?
Mano's got the right answer if you're looking to position something on the map that isn't bounded geographically, like a menu or titlebar.
If you're looking to display something geographically-bound, like a city name (pretending for a second that the API doesn't already do this) than you'll be headed the CustomOverlay route. While all the examples use images, that's not a requirement by any means. If you look at the simple overlay example and view the source code around line 62 you'll see the exact lines adding the <img> object to the <div>. You could just as easily add text to the div instead of an image.
Actually you can use float the div over your map using CSS. You have to be careful about the positioning. Check out this post:
div on top of div with Google Maps API
Go to this demo purpose website: http://easysublease.org/mapcoverjs/
On the map, right Click on map, and you will see a context menu. Within this context menu, there is a input, you can just input some text on the input. Then next generated Marker will have the text you entered there.
To see how it works, you can go to its github: https://github.com/bovetliu/mapcover.
Mapcover.js is one javascript gadget enabling Developers to Write HTML/CSS to create customized elements on Google Map.