CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3marker
Lucfia
Lucfia

Reputation: 671

Google Maps png marker with transparent background

How can I set transparent background to my .png marker via Google Maps? Image file has transparent background, but when I am trying to render it to the map, it appears with white background

marker = new google.maps.Marker({
    map: map,
    optimized: false,
    icon: new google.maps.MarkerImage('images/assets/marker.png')
});

marker.setDraggable(true);

//... some magic

map.setZoom(zoom);
map.setCenter(pos);  

marker.setPosition(pos);
marker.setMap(map);

Thank you for ani tips!!

Edit: This doesn't work... background is still white (default marker is transparent neither)

marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_green.png', [10][20]);

EDIT:// DEFAULT MARKERS ARE NOT TRANSPAENT TOO

EDIT: new facts:// Everything, what should be transparent in google maps, is not transparent => it's white! All original assets too!

Upvotes: 3

Views: 11636

Answers (4)

roylewilliam
roylewilliam

Reputation: 35

Some quick editing with GIMP should be able to fix your problem. Lucfia's answer is a pointer in the right direction, but did not work for me.

Steps to fixing your icon for integration with the Google Maps API with transparency:

  1. Open the image in GIMP. While the image may appear transparent in GIMP, it will not yet necessarily be transparent when loaded with the Google Maps API as an icon via setIcon

  2. Go to Layer > Transparency > Color To Alpha

  3. Adjust Threshold/Opacity as needed. Export the image as a png. The generated PNG file will now be transparent with setIcon.

Note that many images downloaded from the web will have the checkerboard pattern which indicates an alpha channel, but will not actually have one in practice.

Upvotes: 0

Rub
Rub

Reputation: 2768

As mentioned here the image has to have transparency AND be "in RGB color mode".

The second part is the difficult.

Finally I resolved it with:

  1. Open the png file (with transparent background) in Gimp
  2. In Gimp select Image > Mode > RGB
  3. Export image with File > "Export as" and select a png type file (out-rgb.png for example).

Now the file has the format that Google Maps require to have the transparency properly displayed (as invisible).

Upvotes: 1

Lucfia
Lucfia

Reputation: 671

Well, after 3 hours I've found the solution. It was coders mistake in style which has been generated by Webflow. In the default settings, there has been set white background to all images.

Do you have same or similiar problem?

ALWAYS check the code and css (mainly images styles) even if someone tells you it is ok. Image with css propery background: white won't show as transparent, never.

Google Maps APIs works fine and clearly. Mistake should be on your side.

Upvotes: 1

cdm
cdm

Reputation: 1360

There must be some error in the rest of your code because this works (and it's almost the same as your code):

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(52,0),
  map: map,
  optimized: false,
  icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png')
});

Snippet:

var mapOptions={
  zoom: 8,
  center: new google.maps.LatLng(52, 0)
};
var map=new google.maps.Map(document.getElementById('map'),mapOptions);

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(52,0),
  map: map,
  optimized: false,
  icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png')
});
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<div id="map" style="width:300px;height:300px"></div>

Upvotes: 3

Related Questions