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.
Related
Currently on a page I am building I have heremaps as the background page, designs call for two elements on the left and on the right that I'm placing over the map element. Right now, when I'm selecting the options button on here maps to select the map view type and other options, those views get hidden as my right element covers it. I've noticed the here map logo has a z-index of 1. Is there a way to change the zIndex of the options button on the buttom right corner?
This code should work for you:
// assuming ui is instance of H.ui.UI
ui.getElement().style.zIndex = 999;
For more information see https://developer.here.com/documentation/maps/topics_api/h-ui-ui.html#h-ui-ui__getelement
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 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)}
I have the following code which is a custom icon on Google Maps V3. I want to rotate it using the jQuery.Rotate plugin.
var image = new google.maps.MarkerImage(
"markers/test.png",
new google.maps.Size(52, 52), // size
new google.maps.Point(0, 0), // origin
new google.maps.Point(20, 0) // anchor
);
marker = new google.maps.Marker(
{
map: map,
draggable: false,
position: markerData[i].latLng,
visible: true,
icon: image,
optimized: false
});
The problem is jQuery.Rotate is wanting the DOM id to identify the element to rotate.. Markerimage doesn't have one and I can't specify it.
Eg.
<img src="img" id="image">
$("#image").rotate(15);
Can anyone show me some sample code that will allow me to either assign an id to the MarkerImage so that jQuery.Rotate can use it eg. #image assuming the id is id="image", or is there another way of telling jQuery.Rotate to use the MarkerImage rather than point to a DOM element?
Any help would be appreciated.. If I can't find an answer to this I'll need to create 360 versions of the same icon for every icon I use of which there are many. I prefer to use this particular plugin though. Hopefully there's an easy answer.
I can't provide an 'answer', just a hint and observation.
Assuming that your map is a DOM object called 'map', have a look at the DOM object map.l.innerContainer.outerHtml. (thats a lower case "l" - map.l)
In outerHtml, amongst many other divs, you should be able to find a div that contains the img file for your icon.
I've wanted to do the same thing as you, rotate icons on the fly, but I haven't yet found the time to see if I can organise a way to put an id on these divs to facilitate using jquery to rotate them. The divs are created by the api.
There are some DOM mutation events (like DOMNodeInsertedIntoDocument) described in the literature but evidently their implementation is unreliable / uneven and it sounds like they have been removed from the W3C spec. I haven't tried any of these yet so can't comment from personal experience.
In my case I just decided to create icon files for each cardinal direction, N NNE NE ENE etc. For my application that seems to get the icons aligned well enough to look ok.
If you succeed in your quest please share your solution here for others.
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.