Jump to content


This topic is now archived and is closed to further replies.


How to get a Retina-ready (2x sized) marker in maps?

Recommended Posts



How can I get my marker to not look blurry on Retina-devices?
Is it possible to upload 2x marker and define a size with CSS or some other method?

Thank you very much!

Share this post

Link to post
Share on other sites



As far as I am concerned this isn't a DMS issue, if you're using the Maps section or the Maps shortcode, both of them are powered by Google Maps. So this is something you will want to search the Google Maps documentation or forums for.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

I believe it's possible to specify the dimensions of the marker with Google Maps

Share this post

Link to post
Share on other sites

Somewhere in the maps section I should probably insert:

new google.maps.Size(42,68)

it would most likely be very easy for a developer to say how it's possible to set the dimensions for the marker. 
But I understand if you're reluctant to help me hack the files in this way. Nevertheless I must be able to provide my client with a sharp icon and saying "unfortunately I can't do it" will not do.

So I''d request a feature to be able to use retina-ready icons whether by specifying the its dimensions or if possible just clicking a checkbox that says: "this is a Retina-icon (2x)"

And if possible, a little assistance on how to implement it at the moment. 
I'm also trying to substitute the 

var image = (map_data[i].image) || markerImg;

on line 106 on maps.js 

to a custom 

var image = {
    url: 'images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)

but I have not managed to make the marker work that way.

Thank you!

Share this post

Link to post
Share on other sites

Ok, I now got it working. 
I commented out the line on 104 in maps.js and added my own image.

//var image = (map_data[i].image) || markerImg
var image = new google.maps.MarkerImage("/wp-content/uploads/2014/07/marker3.png", null, null, null, new google.maps.Size(30,45));

With Retina-displays getting more and more popular it would be really nice to somehow be possible to get the markers working with them. Especially since the maps-section is so well designed overall.



Share this post

Link to post
Share on other sites

  • Similar Content

    • HenryMote
      By HenryMote
      Hi guys,
      I have DMS and the maps isnt working. Here's the link to the site where you can see the error .http://plumb-now.co.uk/
      Thanks for your help!
    • MrFent
      By MrFent+
      I'd like to request the option to display the "Satellite," "Hybrid," and "Terraine" in the Maps section. 
      I was able to manually accomplish this by changing line 202 in the maps.js from:
      mapTypeId:       google.maps.MapTypeId.ROADMAP,
      mapTypeId:       'satellite',
      But it would be nice if there was a section option to do this. 
      Also, the map zoom level 18 isn't the highest zoom level that Google Maps is able to display. Could you please increase the number to at least 19? Thanks!
    • StuLeeUK
      By StuLeeUK+
      Hi, could someone point me in the right direction please as I have no idea where i might be going wrong here.
      I've added the maps section but all I get is a blank space.
      I have created an API key (assuming that was the right thing to do) but nothing I do seems to change anything, just always have an empty placeholder. With or without the API key it doesn't make any difference.
      site is www.tackandfeed.co.uk
    • gerolan
      By gerolan+
      Whenever I try to use the maps section the map doesn't display and the console throws a MissingKeyMapError.
    • micstepl
      By micstepl+
      @Simon I do have an urgent request for a client Projekt. After migrating (before it worked) my site to anpother Server I get problems will all ShortCode Sections.
      See this Problem here: http://www.baumeister-scheidl.at/map-try
      thanks in advance!
      Maybe ist a User (MY) fault.