How can I display a digit inside the GMarker ?
I used title, but it is only on rollover like title on links or image.
Do you have any idea how I can do that ?
There's two ways to do it.
The old way is to create or obtain images for markers with each number and use them as custom icon images. There are several sets listed here or you can use one of the services listed there to create your own, or draw your own with an image editor. Save the resulting images to your own webspace, don't try to use the services dynamically because they occasionally fail.
The new way is to use the LabeledMarker extension which creates things that work something like Google markers but allow you to put text onto the marker dynamically. (Hint: works quite nicely with MapIconMaker, like this.)
You can create custom markers with mapicon Factory. Select the Characters radio button and pick a character type, and then click the Numbers checkbox. Dismiss the ad and you will see the markers.
Related
I have an issue with one thing.
I have a map of world and I want to add functionality when a user clicks on one of the list elements (you can see 3 lists with different places on the image, for example, Paris Air Show) it would show me on the map. As you can see on image example
Is it possible to do? It should work on different devices, but I have no idea how to create that.
Thanks a lot for your help.
Here is a good solution, which works for me.
So I've created a map with areas and on those areas, I put coordinates of places and this map is attached to the image. Then I calculate a place using map.getBoundingClientRect()
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.
So I have a probably not so unique scenario. The simplest way to explain it is a google map with all 50 US states, each state will have two markers. The markers are both driven by the same lat/long value. The problem Im having is that the markers are rendering ontop of one another. I somehow need to have them render next to one another or offset so that I can see both. The problem is how do I get it to not overlap into another state.
I saw some really neat "spider" functionality where it renders one marker and then if you click on it the others fan out, but the website was in another language.
I am going to try and use the following library.
https://github.com/jawj/OverlappingMarkerSpiderfier
The problem with the above implementation is that I am using a combination of KML and google maps client-side. I dont see a way to implement that for the kml markers
The Overlapping Marker Spiderfier project on GitHub will probably accomplish what you need.
Otherwise you can play around with the Marker's icon property. The icon can accept a Symbol which has and anchor that can be shifted from the default location (0,0).
Symbol documentation: https://developers.google.com/maps/documentation/javascript/reference#Symbol
Our website selects establishments from a query and returns the results to the user in batches of 10 locations displaying details in a gridview and locations as user pushpins in bing maps. Hovering the item in the map pops up info panel etc.
My requirements to make this more useable are as follows:-
1) When a user hovers over the item in the gridview list, the corresponding pin on the map should be highlighted.
2) When a user clicks an item in the list, the map zooms to that location. (which I think is relatively simple by redrawing map with different centre and scale)
My thoughts for the first one are to use JavaScript to get the element of the associated pushpin and replace it with a new image in the ‘highlighted’ state and to replace it with the original afterwards.
So my question is:-
Is this the right approach or is there a better one and is there any sample code doing something similar available out there?
Many thanks
Paul
That's exactly the approach I use ;) The only slight modification I'd suggest is that, instead of replacing the image with an entirely new one, you make use of a sprite sheet that has both the highlighted and unhighlighted images on it.
Then, in the onmouseover event handler, set the typeName property of the pushpin to assign a CSS class that offsets the image to display only the highlighted state, and in the onmouseout event reset the CSS class again so that the unhighlighted background image is displayed. That way, your page will load quicker and you won't have to risk a flicker as the old image is replaced with the new.
Reference for typeName property: http://msdn.microsoft.com/en-us/library/gg427629.aspx
i need to do something like this one picture.where if i drag it any map other map will automatically dragging.and that downtown map should be inside that mobile frame. And this two map images are in different divider
I don't know is it working on different types of maps, but you can easly do it with google maps. You can just link one div to another and pass vanishing point. Size of the map is included in link to google map, so that will be easy to change ;)