CODEWITHSUNDEEP
javascriptjquerycssgoogle-maps
Janath
Janath

Reputation: 1248

Google map custom map marker image hover not working

I just want to give an hover for google map custom map maker image. I'm using image path for styling custom image. Styles working perfectly. But hover not working.

Jsfiddle

Here's my code

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"] {
   border: 4px solid #73cccc !important;
};

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"]:hover{
  opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map_canvas" style="height:400px; width: 100%"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"></script>
<script>
var image = 'https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png';
var mapOptions = {
  zoom: 13,
  center: new google.maps.LatLng(37.423, -122.082), 
  mapTypeId: google.maps.MapTypeId.ROADMAP 
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var myPos = new google.maps.LatLng(37.4231054, -122.08239880000002); 
var myMarker = new google.maps.Marker({position: myPos, map: map, icon: image });
</script>

Is there any css solution or is this related with google map mouseover event?

Upvotes: 2

Views: 1236

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9348

Here is my solution

Add these event listeners for the marker

  myMarker.addListener('mouseover', function() {
    console.log("mouseover");
    this.setOpacity(0.5);
  });
    myMarker.addListener('mouseout', function() {
    console.log("mouseout");
    this.setOpacity(1);
  });

No need to add additonal CSS for opacity

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"] {
  border: 4px solid #73cccc !important;
}

img[src="https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png"]:hover {
  opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map_canvas" style="height:400px; width: 100%"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"></script>
<script>
  var image = 'https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/119c87f6-9b28-11e6-8026-00163ed833e7/3135981775/avatar-fortress-fight-2-logo.png';
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(37.423, -122.082),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var myPos = new google.maps.LatLng(37.4231054, -122.08239880000002);
  var myMarker = new google.maps.Marker({
    position: myPos,
    map: map,
    icon: image
  });
  myMarker.addListener('mouseover', function() {
    console.log("mouseover");
    this.setOpacity(0.5);
  });
    myMarker.addListener('mouseout', function() {
    console.log("mouseout");
    this.setOpacity(1);
  });
</script>

Upvotes: 3

Related Questions