How to display custom DOM element in particular position of agm-map Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!How to tell if a DOM element is visible in the current viewport?How do you keep parents of floated elements from collapsing?Retrieve the position (X,Y) of an HTML elementHow to move an element into another element?How to center absolutely positioned element in div?How do I combine a background-image and CSS3 gradient on the same element?How can I set the default value for an HTML <select> element?How do I remove the space between inline-block elements?How to center a “position: absolute” elementCannot display HTML string
What were wait-states, and why was it only an issue for PCs?
What is the difference between 准时 and 按时?
Is Bran literally the world's memory?
Why do people think Winterfell crypts is the safest place for women, children & old people?
How to create a command for the "strange m" symbol in latex?
Why these surprising proportionalities of integrals involving odd zeta values?
Can a Wizard take the Magic Initiate feat and select spells from the Wizard list?
What *exactly* is electrical current, voltage, and resistance?
How do I deal with an erroneously large refund?
Can I take recommendation from someone I met at a conference?
Providing direct feedback to a product salesperson
Does traveling In The United States require a passport or can I use my green card if not a US citizen?
Recursive calls to a function - why is the address of the parameter passed to it lowering with each call?
How can I wire a 9-position switch so that each position turns on one more LED than the one before?
Can I ask an author to send me his ebook?
Lights are flickering on and off after accidentally bumping into light switch
Normal Operator || T^2|| = ||T||^2
How was Lagrange appointed professor of mathematics so early?
How can I introduce the names of fantasy creatures to the reader?
A journey... into the MIND
Is Vivien of the Wilds + Wilderness Reclamation a competitive combo?
A German immigrant ancestor has a "Registration Affidavit of Alien Enemy" on file. What does that mean exactly?
Proving inequality for positive definite matrix
Does the Pact of the Blade warlock feature allow me to customize the properties of the pact weapon I create?
How to display custom DOM element in particular position of agm-map
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!How to tell if a DOM element is visible in the current viewport?How do you keep parents of floated elements from collapsing?Retrieve the position (X,Y) of an HTML elementHow to move an element into another element?How to center absolutely positioned element in div?How do I combine a background-image and CSS3 gradient on the same element?How can I set the default value for an HTML <select> element?How do I remove the space between inline-block elements?How to center a “position: absolute” elementCannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm going to display custom dom into agm-map in my angular6 project.
When I use agm-marker I can only display specific icon and label.
What I want to display looks like:
.user-location i
opacity: 0.7;
.user-location img
border-radious: 100%;
...<a class="user-location">
<i class="pin-icon"></i>
<figure>
<img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
</figure>
...
</a>html css
angular google-maps asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
add a comment |
I'm going to display custom dom into agm-map in my angular6 project.
When I use agm-marker I can only display specific icon and label.
What I want to display looks like:
.user-location i
opacity: 0.7;
.user-location img
border-radious: 100%;
...<a class="user-location">
<i class="pin-icon"></i>
<figure>
<img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
</figure>
...
</a>html css
angular google-maps asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
I only see---in you output. You wan a custom icon on instead of the native marker?
– Patricio Vargas
Mar 9 at 4:26
Yes. I want to display not only custom icon but also particular elements as I mentioned which means I want to edit style of imgs or icons like border-radious and margin.
– M. Urazov
Mar 9 at 4:31
In agm-marker there are only properties like size, not detailed styles
– M. Urazov
Mar 9 at 4:32
add a comment |
I'm going to display custom dom into agm-map in my angular6 project.
When I use agm-marker I can only display specific icon and label.
What I want to display looks like:
.user-location i
opacity: 0.7;
.user-location img
border-radious: 100%;
...<a class="user-location">
<i class="pin-icon"></i>
<figure>
<img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
</figure>
...
</a>html css
angular google-maps asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
I'm going to display custom dom into agm-map in my angular6 project.
When I use agm-marker I can only display specific icon and label.
What I want to display looks like:
.user-location i
opacity: 0.7;
.user-location img
border-radious: 100%;
...<a class="user-location">
<i class="pin-icon"></i>
<figure>
<img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
</figure>
...
</a>.user-location i
opacity: 0.7;
.user-location img
border-radious: 100%;
...<a class="user-location">
<i class="pin-icon"></i>
<figure>
<img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
</figure>
...
</a>.user-location i
opacity: 0.7;
.user-location img
border-radious: 100%;
...<a class="user-location">
<i class="pin-icon"></i>
<figure>
<img src="../../assets/layouts/layout/img/new-icon.png" alt="" />
</figure>
...
</a>html css
angular google-maps html css
angular google-maps asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
asked Mar 9 at 3:05
M. UrazovM. Urazov
10510
10510
I only see---in you output. You wan a custom icon on instead of the native marker?
– Patricio Vargas
Mar 9 at 4:26
Yes. I want to display not only custom icon but also particular elements as I mentioned which means I want to edit style of imgs or icons like border-radious and margin.
– M. Urazov
Mar 9 at 4:31
In agm-marker there are only properties like size, not detailed styles
– M. Urazov
Mar 9 at 4:32
add a comment |
I only see---in you output. You wan a custom icon on instead of the native marker?
– Patricio Vargas
Mar 9 at 4:26
Yes. I want to display not only custom icon but also particular elements as I mentioned which means I want to edit style of imgs or icons like border-radious and margin.
– M. Urazov
Mar 9 at 4:31
In agm-marker there are only properties like size, not detailed styles
– M. Urazov
Mar 9 at 4:32
I only see
--- in you output. You wan a custom icon on instead of the native marker?– Patricio Vargas
Mar 9 at 4:26
I only see
--- in you output. You wan a custom icon on instead of the native marker?– Patricio Vargas
Mar 9 at 4:26
Yes. I want to display not only custom icon but also particular elements as I mentioned which means I want to edit style of imgs or icons like border-radious and margin.
– M. Urazov
Mar 9 at 4:31
Yes. I want to display not only custom icon but also particular elements as I mentioned which means I want to edit style of imgs or icons like border-radious and margin.
– M. Urazov
Mar 9 at 4:31
In agm-marker there are only properties like size, not detailed styles
– M. Urazov
Mar 9 at 4:32
In agm-marker there are only properties like size, not detailed styles
– M. Urazov
Mar 9 at 4:32
add a comment |
1 Answer
1
active
oldest
votes
I have changed the marker the following way:
<agm-map [latitude]="lat" [longitude]="lng" [styles]="mapStyle === 'dark' ? styleDark : styleLight">
<div *ngFor="let marker of markers;">
<agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>
</agm-marker>
</div>
</agm-map>
If you ever want to customize the map too you can do the following:
[styles]="mapStyle === 'dark' ? styleDark : styleLight"
in your ts file you will have all the properties. To learn more about how to customize a map with icons and colors in the map take a look to this repo:
https://github.com/devpato/SOSmap
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
Hi. Thanks for replying I checked the repo But there aren't any codes to style agm-marker. I want to edit styles of icons like border-radious, border-color, margin and so on. How can I change the style. If it's impossible in agm-marker can you solve this problem in other way?
– M. Urazov
Mar 9 at 5:37
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073604%2fhow-to-display-custom-dom-element-in-particular-position-of-agm-map%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I have changed the marker the following way:
<agm-map [latitude]="lat" [longitude]="lng" [styles]="mapStyle === 'dark' ? styleDark : styleLight">
<div *ngFor="let marker of markers;">
<agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>
</agm-marker>
</div>
</agm-map>
If you ever want to customize the map too you can do the following:
[styles]="mapStyle === 'dark' ? styleDark : styleLight"
in your ts file you will have all the properties. To learn more about how to customize a map with icons and colors in the map take a look to this repo:
https://github.com/devpato/SOSmap
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
Hi. Thanks for replying I checked the repo But there aren't any codes to style agm-marker. I want to edit styles of icons like border-radious, border-color, margin and so on. How can I change the style. If it's impossible in agm-marker can you solve this problem in other way?
– M. Urazov
Mar 9 at 5:37
add a comment |
I have changed the marker the following way:
<agm-map [latitude]="lat" [longitude]="lng" [styles]="mapStyle === 'dark' ? styleDark : styleLight">
<div *ngFor="let marker of markers;">
<agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>
</agm-marker>
</div>
</agm-map>
If you ever want to customize the map too you can do the following:
[styles]="mapStyle === 'dark' ? styleDark : styleLight"
in your ts file you will have all the properties. To learn more about how to customize a map with icons and colors in the map take a look to this repo:
https://github.com/devpato/SOSmap
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
Hi. Thanks for replying I checked the repo But there aren't any codes to style agm-marker. I want to edit styles of icons like border-radious, border-color, margin and so on. How can I change the style. If it's impossible in agm-marker can you solve this problem in other way?
– M. Urazov
Mar 9 at 5:37
add a comment |
I have changed the marker the following way:
<agm-map [latitude]="lat" [longitude]="lng" [styles]="mapStyle === 'dark' ? styleDark : styleLight">
<div *ngFor="let marker of markers;">
<agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>
</agm-marker>
</div>
</agm-map>
If you ever want to customize the map too you can do the following:
[styles]="mapStyle === 'dark' ? styleDark : styleLight"
in your ts file you will have all the properties. To learn more about how to customize a map with icons and colors in the map take a look to this repo:
https://github.com/devpato/SOSmap
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
I have changed the marker the following way:
<agm-map [latitude]="lat" [longitude]="lng" [styles]="mapStyle === 'dark' ? styleDark : styleLight">
<div *ngFor="let marker of markers;">
<agm-marker [iconUrl]="'/assets/markers/'+marker.type+'.png'" [latitude]="marker.lat" [longitude]="marker.long" (markerClick)='openMarkerInfo(markerInfo, marker)'>
</agm-marker>
</div>
</agm-map>
If you ever want to customize the map too you can do the following:
[styles]="mapStyle === 'dark' ? styleDark : styleLight"
in your ts file you will have all the properties. To learn more about how to customize a map with icons and colors in the map take a look to this repo:
https://github.com/devpato/SOSmap
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
answered Mar 9 at 5:09
Patricio VargasPatricio Vargas
1
1
Hi. Thanks for replying I checked the repo But there aren't any codes to style agm-marker. I want to edit styles of icons like border-radious, border-color, margin and so on. How can I change the style. If it's impossible in agm-marker can you solve this problem in other way?
– M. Urazov
Mar 9 at 5:37
add a comment |
Hi. Thanks for replying I checked the repo But there aren't any codes to style agm-marker. I want to edit styles of icons like border-radious, border-color, margin and so on. How can I change the style. If it's impossible in agm-marker can you solve this problem in other way?
– M. Urazov
Mar 9 at 5:37
Hi. Thanks for replying I checked the repo But there aren't any codes to style agm-marker. I want to edit styles of icons like border-radious, border-color, margin and so on. How can I change the style. If it's impossible in agm-marker can you solve this problem in other way?
– M. Urazov
Mar 9 at 5:37
Hi. Thanks for replying I checked the repo But there aren't any codes to style agm-marker. I want to edit styles of icons like border-radious, border-color, margin and so on. How can I change the style. If it's impossible in agm-marker can you solve this problem in other way?
– M. Urazov
Mar 9 at 5:37
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55073604%2fhow-to-display-custom-dom-element-in-particular-position-of-agm-map%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I only see
---in you output. You wan a custom icon on instead of the native marker?– Patricio Vargas
Mar 9 at 4:26
Yes. I want to display not only custom icon but also particular elements as I mentioned which means I want to edit style of imgs or icons like border-radious and margin.
– M. Urazov
Mar 9 at 4:31
In agm-marker there are only properties like size, not detailed styles
– M. Urazov
Mar 9 at 4:32