I've looked through other tickets regarding the map marker, but none of them bring up the fact that the map marker image is not optimized for retina displays.  I've tried a few different methods to improving the image, but is it possible to style this element?  I think adding "width: 50%" would solve my problem, but it appears the image is called using a data attribute and not a CSS selector.

Thanks, this worked perfectly!

Is there any way the width & height of the custom map pin can be inputted into the Contact Options page in the settings?  I'm happy to keep replacing the map.js file, but it would be awesome to have the width & height dynamically updated in the map.js file.

I would like to have a solution to this issue as well. Are there any plans of offering the option to make the map marker image work for retina displays or just 50% width as Chris mentioned below without changing a parent theme file?

I couldn't get the JS line mentioned below to work:

---

var markerImg = new google.maps.MarkerImage($('.nectar-google-map').attr('data-marker-img'), null, null, null, new google.maps.Size(20,30));

---

...in the current version as the code for markers now looks like this:

---

var marker = new google.maps.Marker({
      position: new google.maps.LatLng($(this).attr('data-lat'), $(this).attr('data-lng')),
       map: map,
       visible: false,
       mapIndex: count,
infoWindowIndex : i,
icon: $('#'+map_id).attr('data-marker-img'),
optimized: false

     });

----

Is there a way currently to add a marker twice the size for a hi dpi display?

Thanks,

Alan.

Also to add that I have tried an SVG, which worked in Chrome, didn't seem to work in Firefox and displayed very large in iOS Safari.

Hi Guys,

I tried to paste your previous post as follow, but it didn't help to resize my icon of 48x80px for a retina screen.

icon: $('#'+map_id).attr('data-marker-img'), null, null, null, new google.maps.Size(24,40)

Is there a way to get this work in the current map.js