How to personalize a Marker on Google Maps with CSS
I have a google map on my html file and is working fine:)! Now I'm trying to personalize the Marker, I can change the img but I want also make it rounded with border-radius: 50%; and give it a border value too. Is that possible? right now I have the picture (squared) and I want to style it with css, is that even possible?
JAVASCRIPT
function initMap() {
// This is the minimum zoom level that we'll allow
var minZoomLevel = 4;
var map = new google.maps.Map(document.getElementById('mapLayer'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
gestureHandling: 'cooperative',
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for world
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-54, -137.50),
new google.maps.LatLng(81, 170.90));
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function () {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
javascript css google-maps
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
add a comment |
I have a google map on my html file and is working fine:)! Now I'm trying to personalize the Marker, I can change the img but I want also make it rounded with border-radius: 50%; and give it a border value too. Is that possible? right now I have the picture (squared) and I want to style it with css, is that even possible?
JAVASCRIPT
function initMap() {
// This is the minimum zoom level that we'll allow
var minZoomLevel = 4;
var map = new google.maps.Map(document.getElementById('mapLayer'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
gestureHandling: 'cooperative',
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for world
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-54, -137.50),
new google.maps.LatLng(81, 170.90));
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function () {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
javascript css google-maps
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
add a comment |
I have a google map on my html file and is working fine:)! Now I'm trying to personalize the Marker, I can change the img but I want also make it rounded with border-radius: 50%; and give it a border value too. Is that possible? right now I have the picture (squared) and I want to style it with css, is that even possible?
JAVASCRIPT
function initMap() {
// This is the minimum zoom level that we'll allow
var minZoomLevel = 4;
var map = new google.maps.Map(document.getElementById('mapLayer'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
gestureHandling: 'cooperative',
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for world
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-54, -137.50),
new google.maps.LatLng(81, 170.90));
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function () {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
javascript css google-maps
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
I have a google map on my html file and is working fine:)! Now I'm trying to personalize the Marker, I can change the img but I want also make it rounded with border-radius: 50%; and give it a border value too. Is that possible? right now I have the picture (squared) and I want to style it with css, is that even possible?
JAVASCRIPT
function initMap() {
// This is the minimum zoom level that we'll allow
var minZoomLevel = 4;
var map = new google.maps.Map(document.getElementById('mapLayer'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
gestureHandling: 'cooperative',
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Bounds for world
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-54, -137.50),
new google.maps.LatLng(81, 170.90));
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function () {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
javascript css google-maps
javascript css google-maps
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
asked Nov 28 '18 at 21:59
EugenioEugenio
309112
309112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
There are many possibilities to achieve that:
Use RichMarker for Google Maps v3
https://stackoverflow.com/a/25048625/1087623
Use CSS selector img src if you know the URL of the image to apply style
https://stackoverflow.com/a/25371006/1087623
Add a class CSS to the marker Layer DIV then apply CSS style:
http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
thanks @Taha Azzabi very useful! I've tried with RichMarker, modified the file directly on Jsfiddle, then when I used on my own file didn't work. I also implemented the RichMarker.js file and the other external link and nothing. I like the 2nd one but, if I have several images? not sure why the Img has the link to the image repeated on the css? what If I want to create several markers? I should also repeat the css styles for all of them? (border-radius, border, shadow, etc)
– Eugenio
Nov 28 '18 at 23:02
add a comment |
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%2f53528753%2fhow-to-personalize-a-marker-on-google-maps-with-css%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
There are many possibilities to achieve that:
Use RichMarker for Google Maps v3
https://stackoverflow.com/a/25048625/1087623
Use CSS selector img src if you know the URL of the image to apply style
https://stackoverflow.com/a/25371006/1087623
Add a class CSS to the marker Layer DIV then apply CSS style:
http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
thanks @Taha Azzabi very useful! I've tried with RichMarker, modified the file directly on Jsfiddle, then when I used on my own file didn't work. I also implemented the RichMarker.js file and the other external link and nothing. I like the 2nd one but, if I have several images? not sure why the Img has the link to the image repeated on the css? what If I want to create several markers? I should also repeat the css styles for all of them? (border-radius, border, shadow, etc)
– Eugenio
Nov 28 '18 at 23:02
add a comment |
There are many possibilities to achieve that:
Use RichMarker for Google Maps v3
https://stackoverflow.com/a/25048625/1087623
Use CSS selector img src if you know the URL of the image to apply style
https://stackoverflow.com/a/25371006/1087623
Add a class CSS to the marker Layer DIV then apply CSS style:
http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
thanks @Taha Azzabi very useful! I've tried with RichMarker, modified the file directly on Jsfiddle, then when I used on my own file didn't work. I also implemented the RichMarker.js file and the other external link and nothing. I like the 2nd one but, if I have several images? not sure why the Img has the link to the image repeated on the css? what If I want to create several markers? I should also repeat the css styles for all of them? (border-radius, border, shadow, etc)
– Eugenio
Nov 28 '18 at 23:02
add a comment |
There are many possibilities to achieve that:
Use RichMarker for Google Maps v3
https://stackoverflow.com/a/25048625/1087623
Use CSS selector img src if you know the URL of the image to apply style
https://stackoverflow.com/a/25371006/1087623
Add a class CSS to the marker Layer DIV then apply CSS style:
http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
There are many possibilities to achieve that:
Use RichMarker for Google Maps v3
https://stackoverflow.com/a/25048625/1087623
Use CSS selector img src if you know the URL of the image to apply style
https://stackoverflow.com/a/25371006/1087623
Add a class CSS to the marker Layer DIV then apply CSS style:
http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
answered Nov 28 '18 at 22:12
Taha AzzabiTaha Azzabi
704616
704616
thanks @Taha Azzabi very useful! I've tried with RichMarker, modified the file directly on Jsfiddle, then when I used on my own file didn't work. I also implemented the RichMarker.js file and the other external link and nothing. I like the 2nd one but, if I have several images? not sure why the Img has the link to the image repeated on the css? what If I want to create several markers? I should also repeat the css styles for all of them? (border-radius, border, shadow, etc)
– Eugenio
Nov 28 '18 at 23:02
add a comment |
thanks @Taha Azzabi very useful! I've tried with RichMarker, modified the file directly on Jsfiddle, then when I used on my own file didn't work. I also implemented the RichMarker.js file and the other external link and nothing. I like the 2nd one but, if I have several images? not sure why the Img has the link to the image repeated on the css? what If I want to create several markers? I should also repeat the css styles for all of them? (border-radius, border, shadow, etc)
– Eugenio
Nov 28 '18 at 23:02
thanks @Taha Azzabi very useful! I've tried with RichMarker, modified the file directly on Jsfiddle, then when I used on my own file didn't work. I also implemented the RichMarker.js file and the other external link and nothing. I like the 2nd one but, if I have several images? not sure why the Img has the link to the image repeated on the css? what If I want to create several markers? I should also repeat the css styles for all of them? (border-radius, border, shadow, etc)
– Eugenio
Nov 28 '18 at 23:02
thanks @Taha Azzabi very useful! I've tried with RichMarker, modified the file directly on Jsfiddle, then when I used on my own file didn't work. I also implemented the RichMarker.js file and the other external link and nothing. I like the 2nd one but, if I have several images? not sure why the Img has the link to the image repeated on the css? what If I want to create several markers? I should also repeat the css styles for all of them? (border-radius, border, shadow, etc)
– Eugenio
Nov 28 '18 at 23:02
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%2f53528753%2fhow-to-personalize-a-marker-on-google-maps-with-css%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
