javascript - google map marker hover effect - Stack Overflow|江阴雨辰互联

I have a some google map with marker:

var locations = [
  {
    'name'    : 'Location 1',
    'adress'  : '215 West Girard Avenue 19123',
    'location':{
      'lat' : 39.9695601,
      'lon' : -75.1395161
    },
    'lable'   : '200',
    'prev'    : '.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=057570f4673903ff39658ee6ac17a66a&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 2',
    'adress'  : '5360 Old York Road 19141',
    'location':{
      'lat' : 40.034038,
      'lon' : -75.145223
    },
    'lable'   : '30',
    'prev'    : '.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=594ae239b7e8e8ed17d447a9950adeb4&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 3',
    'adress'  : '1350 W Girard Avenue 19123',
    'location':{
      'lat' : 39.9713524,
      'lon' : -75.1590360
    },
    'lable'   : '45',
    'prev'    : '.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5101b3f0270554cf6224f12e70cb7fb9&auto=format&fit=crop&w=600&q=60',
  }
];

gmarkers = [];




function initialize() {

  var content = document.getElementById('iw');

  var lat = 39.9995601,
      lng = -75.1395161,
      latlng = new google.maps.LatLng(lat, lng);		

  var mapOptions = {           
    center: new google.maps.LatLng(lat, lng),           
    zoom: 12,           
    mapTypeId: google.maps.MapTypeId.ROADMAP         
  };

  var mapCanvas = document.getElementById('map');

  var map = new google.maps.Map(mapCanvas, mapOptions);



  for (var i = 0; i < locations.length; i++) {

    gmarkers[locations[i].name] =
      createMarker(
      new google.maps.LatLng(locations[i].location.lat, locations[i].location.lon),
      locations[i].name + "<br>" + 
      locations[i].adress, 
      locations[i].lable
    );   

    
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 350
    }); 		    
  }




  function createMarker(latlng, html, lable) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        // path: "M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z",
        // fillColor: 'red',
        // fillOpacity: 1,
        // strokeWeight: 0,
        // scale: 1,
        url: 'data:image/svg+xml;charset=utf-8,' + 
        encodeURIComponent('<svg xmlns="" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
        scaledSize: new google.maps.Size(44, 44),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(44,44),
        labelOrigin:  new google.maps.Point(22,18),
      },
      label: {
        text: lable,
        color: "#fff",
      }
    });


    marker.setOpacity(.75);

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(html);
      infowindow.open(map, marker);
    });

    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    return marker;
  }



}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
};


google.maps.event.addDomListener(window, 'load', initialize);







$('a').on('click', function(e){
  e.preventDefault();


  var $this = $(this),
      loc = $this.data('location');

  // ----- Var 2 Wit wrap initialize function
  myclick(loc);

});


$('a').hover(
  function(){
    var $this = $(this),
        loc = $this.data('location');

    gmarkers[loc].setOpacity(1.0);

    gmarkers[loc].setIcon(new google.maps.MarkerImage (
    	'data:image/svg+xml;charset=utf-8,' + 
    	        encodeURIComponent('<svg xmlns="" width="44" height="44" viewBox="0 0 24 24"><path fill="red" d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
           new google.maps.Size(44, 44),
           new google.maps.Point(0, 0),
           null,
           null
    ) );
  },
  function(){
    var $this = $(this),
        loc = $this.data('location');

    gmarkers[loc].setOpacity(.75);

    gmarkers[loc].setIcon(new google.maps.MarkerImage (
    	'data:image/svg+xml;charset=utf-8,' + 
    	        encodeURIComponent('<svg xmlns="" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
           new google.maps.Size(44, 44),
           null,
           null,
           null	
    ) );
  }
);

#map {         
  height: 500px;         
  width: 100%;         
  margin: 0 auto;       
}

<script src=".2.4.js"></script>


<script src=";region=uk&language=en"></script>


<ul>
  <li>
    <a href="#" data-location="Location 1">Location 1</a>
  </li>
  <li>
    <a href="#" data-location="Location 2">Location 2</a>
  </li>
  <li>
    <a href="#" data-location="Location 3">Location 3</a>
  </li>
</ul>


<div id="map"></div>

I have a some google map with marker:

var locations = [
  {
    'name'    : 'Location 1',
    'adress'  : '215 West Girard Avenue 19123',
    'location':{
      'lat' : 39.9695601,
      'lon' : -75.1395161
    },
    'lable'   : '200',
    'prev'    : 'https://images.unsplash./photo-1489706920962-640fcad4b463?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=057570f4673903ff39658ee6ac17a66a&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 2',
    'adress'  : '5360 Old York Road 19141',
    'location':{
      'lat' : 40.034038,
      'lon' : -75.145223
    },
    'lable'   : '30',
    'prev'    : 'https://images.unsplash./photo-1483519396903-1ef292f4974a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=594ae239b7e8e8ed17d447a9950adeb4&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name'    : 'Location 3',
    'adress'  : '1350 W Girard Avenue 19123',
    'location':{
      'lat' : 39.9713524,
      'lon' : -75.1590360
    },
    'lable'   : '45',
    'prev'    : 'https://images.unsplash./photo-1520803703785-bfb8d67060b1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5101b3f0270554cf6224f12e70cb7fb9&auto=format&fit=crop&w=600&q=60',
  }
];

gmarkers = [];




function initialize() {

  var content = document.getElementById('iw');

  var lat = 39.9995601,
      lng = -75.1395161,
      latlng = new google.maps.LatLng(lat, lng);		

  var mapOptions = {           
    center: new google.maps.LatLng(lat, lng),           
    zoom: 12,           
    mapTypeId: google.maps.MapTypeId.ROADMAP         
  };

  var mapCanvas = document.getElementById('map');

  var map = new google.maps.Map(mapCanvas, mapOptions);



  for (var i = 0; i < locations.length; i++) {

    gmarkers[locations[i].name] =
      createMarker(
      new google.maps.LatLng(locations[i].location.lat, locations[i].location.lon),
      locations[i].name + "<br>" + 
      locations[i].adress, 
      locations[i].lable
    );   

    
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 350
    }); 		    
  }




  function createMarker(latlng, html, lable) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        // path: "M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z",
        // fillColor: 'red',
        // fillOpacity: 1,
        // strokeWeight: 0,
        // scale: 1,
        url: 'data:image/svg+xml;charset=utf-8,' + 
        encodeURIComponent('<svg xmlns="http://www.w3/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
        scaledSize: new google.maps.Size(44, 44),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(44,44),
        labelOrigin:  new google.maps.Point(22,18),
      },
      label: {
        text: lable,
        color: "#fff",
      }
    });


    marker.setOpacity(.75);

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(html);
      infowindow.open(map, marker);
    });

    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });

    return marker;
  }



}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
};


google.maps.event.addDomListener(window, 'load', initialize);







$('a').on('click', function(e){
  e.preventDefault();


  var $this = $(this),
      loc = $this.data('location');

  // ----- Var 2 Wit wrap initialize function
  myclick(loc);

});


$('a').hover(
  function(){
    var $this = $(this),
        loc = $this.data('location');

    gmarkers[loc].setOpacity(1.0);

    gmarkers[loc].setIcon(new google.maps.MarkerImage (
    	'data:image/svg+xml;charset=utf-8,' + 
    	        encodeURIComponent('<svg xmlns="http://www.w3/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="red" d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
           new google.maps.Size(44, 44),
           new google.maps.Point(0, 0),
           null,
           null
    ) );
  },
  function(){
    var $this = $(this),
        loc = $this.data('location');

    gmarkers[loc].setOpacity(.75);

    gmarkers[loc].setIcon(new google.maps.MarkerImage (
    	'data:image/svg+xml;charset=utf-8,' + 
    	        encodeURIComponent('<svg xmlns="http://www.w3/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
           new google.maps.Size(44, 44),
           null,
           null,
           null	
    ) );
  }
);

#map {         
  height: 500px;         
  width: 100%;         
  margin: 0 auto;       
}

<script src="https://code.jquery./jquery-2.2.4.js"></script>


<script src="https://maps.google./maps/api/js?libraries=places&region=uk&language=en"></script>


<ul>
  <li>
    <a href="#" data-location="Location 1">Location 1</a>
  </li>
  <li>
    <a href="#" data-location="Location 2">Location 2</a>
  </li>
  <li>
    <a href="#" data-location="Location 3">Location 3</a>
  </li>
</ul>


<div id="map"></div>

codepen link

I'm trying to implement a color change:

marker.setIcon(new google.maps.MarkerImage (
        'data:image/svg+xml;charset=utf-8,' + 
                encodeURIComponent('<svg xmlns="http://www.w3/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="blue" d="M12 0c-5.522 0-10 4.395-10 9.815 0 5.505 4.375 9.268 10 14.185 5.625-4.917 10-8.68 10-14.185 0-5.42-4.478-9.815-10-9.815zm0 18c-4.419 0-8-3.582-8-8s3.581-8 8-8 8 3.582 8 8-3.581 8-8 8z"/></svg>'),
           new google.maps.Size(44, 44),
           new google.maps.Point(0, 0),
           null,
           null
    ) );

But for some reason, when hovering, the icon is shifted.

If you use svg, then generally this code does not work.

Question: What are the code for implementing the marker effect, changing the color of the marker, the size of the marker, and if using svg for the marker (changing the fill marker)?

Share Improve this question edited Aug 12, 2018 at 12:08 geocodezip 161k14 gold badges226 silver badges255 bronze badges asked Aug 12, 2018 at 9:36 SVE 1,6555 gold badges33 silver badges59 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

Not the problem, but MarkerImage was deprecated in lieu of the anonymous object Icon long ago (it is no longer documented, but still works)

The issue is you aren't defining the normal icons and the on hover icons the same way (some are using the Icon definition, some are using MarkerImage). If I make the definitions consistent, the anchor for the icons doesn't change.

function initialize() {

  var content = document.getElementById('iw');

  var lat = 39.9995601,
    lng = -75.1395161,
    latlng = new google.maps.LatLng(lat, lng);

  var mapOptions = {
    center: new google.maps.LatLng(lat, lng),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var mapCanvas = document.getElementById('map');

  var map = new google.maps.Map(mapCanvas, mapOptions);
  for (var i = 0; i < locations.length; i++) {
    gmarkers[locations[i].name] =
      createMarker(
        new google.maps.LatLng(locations[i].location.lat, locations[i].location.lon),
        locations[i].name + "<br>" +
        locations[i].adress,
        locations[i].lable
      );
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 350
    });
  }
  function createMarker(latlng, html, lable) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: {
        url: 'data:image/svg+xml;charset=utf-8,' +
          encodeURIComponent('<svg xmlns="http://www.w3/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
        scaledSize: new google.maps.Size(44, 44),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(44, 44),
        labelOrigin: new google.maps.Point(22, 18),
      },
      label: {
        text: lable,
        color: "#fff",
      }
    });
    marker.setOpacity(.75);
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(html);
      infowindow.open(map, marker);
    });
    google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
    });
    return marker;
  }
}
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
};
google.maps.event.addDomListener(window, 'load', initialize);
$('a').on('click', function(e) {
  e.preventDefault();
  var $this = $(this),
    loc = $this.data('location');
  // ----- Var 2 Wit wrap initialize function
  myclick(loc);
});
$('a').hover(
  function() {
    var $this = $(this),
      loc = $this.data('location');
    gmarkers[loc].setOpacity(1.0);
    gmarkers[loc].setIcon({
      url: 'data:image/svg+xml;charset=utf-8,' +
        encodeURIComponent('<svg xmlns="http://www.w3/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path fill="red" d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
      scaledSize: new google.maps.Size(44, 44),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(44, 44),
      labelOrigin: new google.maps.Point(22, 18),
    })
  },
  function() {
    var $this = $(this),
      loc = $this.data('location');
    gmarkers[loc].setOpacity(.75);
    gmarkers[loc].setIcon({
      url: 'data:image/svg+xml;charset=utf-8,' +
        encodeURIComponent('<svg xmlns="http://www.w3/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>'),
      scaledSize: new google.maps.Size(44, 44),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(44, 44),
      labelOrigin: new google.maps.Point(22, 18),
    });
  }
);

var locations = [{
    'name': 'Location 1',
    'adress': '215 West Girard Avenue 19123',
    'location': {
      'lat': 39.9695601,
      'lon': -75.1395161
    },
    'lable': '200',
    'prev': 'https://images.unsplash./photo-1489706920962-640fcad4b463?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=057570f4673903ff39658ee6ac17a66a&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name': 'Location 2',
    'adress': '5360 Old York Road 19141',
    'location': {
      'lat': 40.034038,
      'lon': -75.145223
    },
    'lable': '30',
    'prev': 'https://images.unsplash./photo-1483519396903-1ef292f4974a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=594ae239b7e8e8ed17d447a9950adeb4&auto=format&fit=crop&w=600&q=60',
  },
  {
    'name': 'Location 3',
    'adress': '1350 W Girard Avenue 19123',
    'location': {
      'lat': 39.9713524,
      'lon': -75.1590360
    },
    'lable': '45',
    'prev': 'https://images.unsplash./photo-1520803703785-bfb8d67060b1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5101b3f0270554cf6224f12e70cb7fb9&auto=format&fit=crop&w=600&q=60',
  }
];
gmarkers = [];

#map {
  height: 500px;
  width: 100%;
  margin: 0 auto;
}

<script src="https://code.jquery./jquery-2.2.4.js"></script>


<script src="https://maps.google./maps/api/js?libraries=places&region=uk&language=en&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>


<ul>
  <li>
    <a href="#" data-location="Location 1">Location 1</a>
  </li>
  <li>
    <a href="#" data-location="Location 2">Location 2</a>
  </li>
  <li>
    <a href="#" data-location="Location 3">Location 3</a>
  </li>
</ul>


<div id="map"></div>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744246321a4564950.html

javascript - google map marker hover effect - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - google map marker hover effect - Stack Overflow

1 Answer 1

相关推荐