CSS icons as marker

[pbrain19]

I am trying to use the css font icons like the ones here http://ionicons.com/. I am having a hard time understanding how I can accomplish this. Is this even possible or do I have to have a png for each image?

[nmccready]

So if your wanting to use a pure GMarker then using anything other than an image / png seems to not be available via GMaps SDK. However you can add CSS styled windows via our stack.

I forgot to document this awesome feature in full 😦 . See here: http://angular-google-maps.org/api#windows . Then look at the examples and the code base for boxClass in window and windows. You will css styled windows that way.

So use window and windows and treat them as markers.

[nmccready]

https://github.com/nlaplante/angular-google-maps/blob/master/src/coffee/directives/api/models/child/window-child-model.coffee#L41-L43

https://github.com/nlaplante/angular-google-maps/blob/master/lib/infobox.js#L77

Important extensions to understand how things work.

https://github.com/nlaplante/angular-google-maps/blob/master/src/coffee/extensions/google.maps.coffee#L13-L57

[nmccready]

Also this post is somewhat relevant. https://plus.google.com/105958096506810638644/posts/Znyyf72s2uu

[pbrain19]

The question that I have now is that if I have a

How do I make the window itself?

Once again thanks for the help... These small bugs are preventing me from getting my app done..

[nmccready]

Best thing you can do is clone our repo.

cd angular-google-maps
npm install
npm install -g grunt grunt-cli bower
bower install
grunt
grunt example

Look at the code here https://github.com/nlaplante/angular-google-maps/blob/master/example/example.html

and its associated controller in exmaples/scripts/controllers . This is the best way to figure out the ins and outs beyond documentation.

[pbrain19]

I worded my question wrong, I am well aware of how to use your api. I meant to say, considering that we will be using the window as a marker how do I make the window to open when the "marker is clicked". I've looked very hard at your examples and there is way to much code to consume. I do not see what I am looking for. Is there maybe a code snippet that takes in a class name and makes it into a marker?

[nmccready]

Ok so your looking to have a window as a marker and a click action to open another "real" window right?

[nmccready]

If this is the case it will be a little more manual to what you are "used" to. However, you can or should be able to use window(s).options to hook to the real google.map events for a Window. Then you will need to manually open a real window via "show" to the associated/mapped "MarkerWindow".

Does this make sense? There is no real existing example of this advanced scenario yet. Therefore you are my guinea pig. However, this should be possible with the current stack.

[pbrain19]

yes. Ideally I just want a marker that accepts a css icon instead of a png and then once clicked opens a window.

[nmccready]

Well if you want to advance Marker and Markers or maybe make a new directive WindowMarker and or WindowMarkers to take care of this layer for you. I am all for it but trying to do it via the Controller level would be advisable initially.

[pbrain19]

Do you have a simplified version of this that I can look at to show exactly what you mean. you passed me the examples earlier but they are way overwhelming. Too much data to consume.

[sml-khamilton]

@nmccready,

Are you working on a WindowMarker[s] directive or is it a future enhancement? I would love to see this feature. I'm having a similar issue. I need to create markers which are wrapped in HTML, as well as being clickable to open an info window.

Currently, how can I use the window directive in place of actual markers? in other words, how do I "hide" the default marker?

thks.

[nmccready]

There is nothing stopping you from using just windows without markers. IE it does not need to be inside markers. Also your suggestion of using Windows as Markers is valid. In-fact it is the only reason windows still exists.

[nmccready]

I guess we could have a directive to alias the window.api and call it cssmarkers. However that may add confusion.

[sml-khamilton]

thanks nmccready.
(I appologize in advance for the length of this comment, hence I highlighted the actual issue)

I tried using windows without markers, with an ng-repeater, but I'm running into an issue. The coordinates are not getting "processed"(for lack of a better word) correctly, and all the windows end up in one spot (using just one of the coordinate pairs). I was able to circumvent this issue by putting the window inside the marker (so the coordinates are set on the marker, not the window), and using a single pixel transparent gif as an icon (to make the default marker 'disappear'). This is terribly inelegant, and I would rather not have to do it, but I can live with it.

In the the window directive I'm setting a boxClass and a template url, which is my fancy-pants marker html/css, to which I also pass some data relevant to the marker from my API. At this point clicking on the marker should pop up an info box with some additional data. Inside my template, I have a hidden div, which is toggled by clicking on the marker, and styled to look like an info box - so close! :).

The problem is that my info box is subject to the z-index of the marker, and in certain instances, my pseudo info box opens 'under' another marker, so that's not going to work. I guess I could increment the z-index of the marker every time I open the info box, but that seems horribly hacky, and would rather just find another way to accomplish what I need.

Any ideas why the window coordinates weren't working (all windows in one spot)?

Any ideas how to do this differently?

Thanks a million,
Kyle

[sml-khamilton]

I guess to put it more simply, can I open an info window from a window or only from a marker?

[nmccready]

Ahh... touche, yeah opening a window from a window will have to be done at the controller level.

[nmccready]

Also you should'nt need ng-repeat for windows it is just using the models attribute. Lastly you can easilt just track active windows (ActiveWindowMarkers) and only show the active ones. This is one reason where I thought of killing Windows, as you should only ever need to show a few actual windows. But if the windows are markers then you do really need to load them all in memory.

[nmccready]

Look here #83 and search for 'epiphany'

[sml-khamilton]

I read #83, but yeah, the windows are markers, so I need to see all of them at once. As an aside, it's also nice that the marker directive has a fit attribute, sparing me doing bounds shenanigans. You might want to add it to windows (if you don't kill them off of course :))

I don't anticipate having more than 10 'markers' at any given time, so I'm not too concerned about memory (should I be?)

Anyway, can't do any more now, cause my work machine died a horrible death before I got a chance to push my code - ughh. time to get some sleep anyway.

thanks for all the help.

[cthrax]

Trying to clean up issues, if this still exists, please re-open with a plnkr demonstrating the issue.