Google Maps Marker with Custom Information
A designer has created a mock-up based on Google Maps, where each marker may or may not have several additional information along side with it.
It can be a simple text indicator or have a colored element(ex: a div) with text on top or in the center of that element as you can see a rough mockup bellow.
These elements must be visible when the marker is added to the map and the information is dynamic, meaning each marker will have it's own specific information.
Is this possible using Google maps? If so, how can I do this?
I've been searching but haven't found anything conclusive on this. Your help is kindly appreciated. Thanks
javascript
google-maps google-maps-api-3 asked Dec 27 '18 at 18:05
Mario Andrade
303113
|
show 2 more comments
A designer has created a mock-up based on Google Maps, where each marker may or may not have several additional information along side with it.
It can be a simple text indicator or have a colored element(ex: a div) with text on top or in the center of that element as you can see a rough mockup bellow.
These elements must be visible when the marker is added to the map and the information is dynamic, meaning each marker will have it's own specific information.
Is this possible using Google maps? If so, how can I do this?
I've been searching but haven't found anything conclusive on this. Your help is kindly appreciated. Thanks
javascript
google-maps google-maps-api-3 asked Dec 27 '18 at 18:05
Mario Andrade
303113
developers.google.com/maps/documentation/javascript/examples/… you can show the infowindow on init, add html inside etc
– Louis R
Dec 27 '18 at 18:09
Or just use markers with custom icons
– Louis R
Dec 27 '18 at 18:13
@LouisR I was thinking about that but I had doubts regarding if it is the best approach. Thanks for your feedback.
– Mario Andrade
Dec 28 '18 at 10:19
I can't see in the mockup what you describe in your question + your question is too broad + it's unclear what you want to achieve.
– MrUpsidown
Dec 28 '18 at 10:23
@MrUpsidown the image shows a marker at the center of the map with 3 colored (red, cyan and green background) items around the marker with a text information around the 3 colores items. For example if the marker represented a warehouse the items around the marker could be the number of employees, the revenue and the warehouse costs. These items must me always visible with the marker and it can't be an image with all the information.
– Mario Andrade
Dec 28 '18 at 11:13
|
show 2 more comments
A designer has created a mock-up based on Google Maps, where each marker may or may not have several additional information along side with it.
It can be a simple text indicator or have a colored element(ex: a div) with text on top or in the center of that element as you can see a rough mockup bellow.
These elements must be visible when the marker is added to the map and the information is dynamic, meaning each marker will have it's own specific information.
Is this possible using Google maps? If so, how can I do this?
I've been searching but haven't found anything conclusive on this. Your help is kindly appreciated. Thanks
javascript
google-maps google-maps-api-3 asked Dec 27 '18 at 18:05
Mario Andrade
303113
A designer has created a mock-up based on Google Maps, where each marker may or may not have several additional information along side with it.
It can be a simple text indicator or have a colored element(ex: a div) with text on top or in the center of that element as you can see a rough mockup bellow.
These elements must be visible when the marker is added to the map and the information is dynamic, meaning each marker will have it's own specific information.
Is this possible using Google maps? If so, how can I do this?
I've been searching but haven't found anything conclusive on this. Your help is kindly appreciated. Thanks
javascript
google-maps google-maps-api-3 javascript
google-maps google-maps-api-3 asked Dec 27 '18 at 18:05
Mario Andrade
303113
asked Dec 27 '18 at 18:05
Mario Andrade
303113
asked Dec 27 '18 at 18:05
Mario Andrade
303113
asked Dec 27 '18 at 18:05
Mario Andrade
303113
asked Dec 27 '18 at 18:05
Mario Andrade
303113
303113
developers.google.com/maps/documentation/javascript/examples/… you can show the infowindow on init, add html inside etc
– Louis R
Dec 27 '18 at 18:09
Or just use markers with custom icons
– Louis R
Dec 27 '18 at 18:13
@LouisR I was thinking about that but I had doubts regarding if it is the best approach. Thanks for your feedback.
– Mario Andrade
Dec 28 '18 at 10:19
I can't see in the mockup what you describe in your question + your question is too broad + it's unclear what you want to achieve.
– MrUpsidown
Dec 28 '18 at 10:23
@MrUpsidown the image shows a marker at the center of the map with 3 colored (red, cyan and green background) items around the marker with a text information around the 3 colores items. For example if the marker represented a warehouse the items around the marker could be the number of employees, the revenue and the warehouse costs. These items must me always visible with the marker and it can't be an image with all the information.
– Mario Andrade
Dec 28 '18 at 11:13
|
show 2 more comments
developers.google.com/maps/documentation/javascript/examples/… you can show the infowindow on init, add html inside etc
– Louis R
Dec 27 '18 at 18:09
Or just use markers with custom icons
– Louis R
Dec 27 '18 at 18:13
@LouisR I was thinking about that but I had doubts regarding if it is the best approach. Thanks for your feedback.
– Mario Andrade
Dec 28 '18 at 10:19
I can't see in the mockup what you describe in your question + your question is too broad + it's unclear what you want to achieve.
– MrUpsidown
Dec 28 '18 at 10:23
@MrUpsidown the image shows a marker at the center of the map with 3 colored (red, cyan and green background) items around the marker with a text information around the 3 colores items. For example if the marker represented a warehouse the items around the marker could be the number of employees, the revenue and the warehouse costs. These items must me always visible with the marker and it can't be an image with all the information.
– Mario Andrade
Dec 28 '18 at 11:13
developers.google.com/maps/documentation/javascript/examples/… you can show the infowindow on init, add html inside etc
– Louis R
Dec 27 '18 at 18:09
developers.google.com/maps/documentation/javascript/examples/… you can show the infowindow on init, add html inside etc
– Louis R
Dec 27 '18 at 18:09
Or just use markers with custom icons
– Louis R
Dec 27 '18 at 18:13
Or just use markers with custom icons
– Louis R
Dec 27 '18 at 18:13
@LouisR I was thinking about that but I had doubts regarding if it is the best approach. Thanks for your feedback.
– Mario Andrade
Dec 28 '18 at 10:19
@LouisR I was thinking about that but I had doubts regarding if it is the best approach. Thanks for your feedback.
– Mario Andrade
Dec 28 '18 at 10:19
I can't see in the mockup what you describe in your question + your question is too broad + it's unclear what you want to achieve.
– MrUpsidown
Dec 28 '18 at 10:23
I can't see in the mockup what you describe in your question + your question is too broad + it's unclear what you want to achieve.
– MrUpsidown
Dec 28 '18 at 10:23
@MrUpsidown the image shows a marker at the center of the map with 3 colored (red, cyan and green background) items around the marker with a text information around the 3 colores items. For example if the marker represented a warehouse the items around the marker could be the number of employees, the revenue and the warehouse costs. These items must me always visible with the marker and it can't be an image with all the information.
– Mario Andrade
Dec 28 '18 at 11:13
@MrUpsidown the image shows a marker at the center of the map with 3 colored (red, cyan and green background) items around the marker with a text information around the 3 colores items. For example if the marker represented a warehouse the items around the marker could be the number of employees, the revenue and the warehouse costs. These items must me always visible with the marker and it can't be an image with all the information.
– Mario Andrade
Dec 28 '18 at 11:13
|
show 2 more comments
0
active
oldest
votes
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%2f53949107%2fgoogle-maps-marker-with-custom-information%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53949107%2fgoogle-maps-marker-with-custom-information%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
developers.google.com/maps/documentation/javascript/examples/… you can show the infowindow on init, add html inside etc
– Louis R
Dec 27 '18 at 18:09
Or just use markers with custom icons
– Louis R
Dec 27 '18 at 18:13
@LouisR I was thinking about that but I had doubts regarding if it is the best approach. Thanks for your feedback.
– Mario Andrade
Dec 28 '18 at 10:19
I can't see in the mockup what you describe in your question + your question is too broad + it's unclear what you want to achieve.
– MrUpsidown
Dec 28 '18 at 10:23
@MrUpsidown the image shows a marker at the center of the map with 3 colored (red, cyan and green background) items around the marker with a text information around the 3 colores items. For example if the marker represented a warehouse the items around the marker could be the number of employees, the revenue and the warehouse costs. These items must me always visible with the marker and it can't be an image with all the information.
– Mario Andrade
Dec 28 '18 at 11:13