admin管理员组

文章数量:1400218

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)?

  • javascript
  • google-maps
  • google-maps-api-3
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 SVESVE 1,6555 gold badges33 silver badges59 bronze badges 0
Add a ment  | 

1 Answer 1

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>

本文标签： javascriptgoogle map marker hover effectStack Overflow

版权声明：本文标题：javascript - google map marker hover effect - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744246320a2597034.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。