• 0
Sign in to follow this  
Followers 0

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


Question

Posted · Report post

Hello!

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

4 answers to this question

  • 0

Posted · Report post

Hi,

 

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted (edited) · Report post

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!

Edited by ketri

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Thanks!

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0