javascript - Google Maps API - Hover on markers and show image - Stack Overflow

admin管理员组

文章数量:1289541

I am trying to get a Google Maps instance to show a bunch of markers, and then when you hover over a specific marker change it to a larger image. I would like it to revert back to the original marker image when the mouse leaves the new image area. I seem to have it working as I'd like in this JSfiddle:

/

var locations_programs = [
     ['Christie Lake Camp', 44.803033, -76.418031, 1, '.png', ''],    
     ['Caldwell Community Centre', 45.373083, -75.735550, 1, '.png', ''],    
     ['Dempsey Community Centre', 45.401887, -75.627530, 1, '.png', ''],    
     ['Brewer Arena', 45.389560, -75.691445, 1, '.png', '']

];

var markersArray = [];
var markers = {};
var mapOptions = {

      center: new google.maps.LatLng(45.4214, -75.6919),
      zoom: 10,
      scrollwheel: true,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoomControl: true,
      zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.RIGHT_TOP
        },
      panControl: true,
          panControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT
        }
    };


//***  PROGRAMS

    var marker, i;
    var id = 'programs';

    for (i = 0; i < locations_programs.length; i++) {  
      var id = 'programs' + i;

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
        map: map
        ,id: id
        ,icon: '.png'
        ,url: locations_programs[i][5]
        ,zIndex:100
      });



        google.maps.event.addListener(marker, 'mouseover', function(event) {
            this.setIcon('.png');
        });
        google.maps.event.addListener(marker, 'mouseout', function(event) {
            this.setIcon('.png');
        });



    }

The only problem is I am using the same code on the beta website, and it's not working the same. On this website the change does not occur on mouseover / mouseout, but rather onclick.

/

It is the map showing just under "Where we're making a difference".

I am trying to get a Google Maps instance to show a bunch of markers, and then when you hover over a specific marker change it to a larger image. I would like it to revert back to the original marker image when the mouse leaves the new image area. I seem to have it working as I'd like in this JSfiddle:

https://jsfiddle/vn9po27c/2/

var locations_programs = [
     ['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids./_images/map_pins/events/canoe-for-kids.png', ''],    
     ['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids./_images/map_pins/events/caldwell-munity-centre.png', ''],    
     ['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids./_images/map_pins/events/dempsey-munity-centre.png', ''],    
     ['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids./_images/map_pins/events/brewer-arena.png', '']

];

var markersArray = [];
var markers = {};
var mapOptions = {

      center: new google.maps.LatLng(45.4214, -75.6919),
      zoom: 10,
      scrollwheel: true,
      scaleControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoomControl: true,
      zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.RIGHT_TOP
        },
      panControl: true,
          panControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT
        }
    };


//***  PROGRAMS

    var marker, i;
    var id = 'programs';

    for (i = 0; i < locations_programs.length; i++) {  
      var id = 'programs' + i;

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
        map: map
        ,id: id
        ,icon: 'http://www.christielakekids./_images/new/blue_circle.png'
        ,url: locations_programs[i][5]
        ,zIndex:100
      });



        google.maps.event.addListener(marker, 'mouseover', function(event) {
            this.setIcon('http://www.christielakekids./_images/map_pins/events/canoe-for-kids.png');
        });
        google.maps.event.addListener(marker, 'mouseout', function(event) {
            this.setIcon('http://www.christielakekids./_images/new/blue_circle.png');
        });



    }

The only problem is I am using the same code on the beta website, and it's not working the same. On this website the change does not occur on mouseover / mouseout, but rather onclick.

http://www.christielakekids./newsite/

It is the map showing just under "Where we're making a difference".

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Jul 25, 2015 at 12:55 duncan 31.9k1515 gold badges8181 silver badges101101 bronze badges asked Jul 21, 2015 at 20:06 user1110562user1110562 42311 gold badge1111 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

try this seem functioning

  <!DOCTYPE html>
    <html>
      <head>
        <title>test sandbox 8</title>

        <style type="text/css">
          #main {
            margin: 60px 15px; 
          }
          #map { 
            min-height: 600px; 
            min-width: 800px; 
          }
        </style>

            <script src="http://maps.google./maps/api/js?v=3&sensor=false" type="text/javascript"></script>
        <script>
          // code to draw map
          var map;
          var col = '#FF0000';
          var link ;
          var latLng;
          var polypoints;

          function initialize() {
var locations_programs = [
   ['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids./_images/map_pins/events/canoe-for-kids.png', ''],    
   ['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids./_images/map_pins/events/caldwell-munity-centre.png', ''],    
   ['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids./_images/map_pins/events/dempsey-munity-centre.png', ''],    
   ['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids./_images/map_pins/events/brewer-arena.png', '']

];

var markersArray = [];
var markers = {};
var mapOptions = {

    center: new google.maps.LatLng(45.4214, -75.6919),
    zoom: 10,
    scrollwheel: true,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.RIGHT_TOP
      },
    panControl: true,
        panControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
      }
  };

  map = new google.maps.Map(document.getElementById('map'),
  mapOptions);


 //***  PROGRAMS

  var marker, i;
  var id = 'programs';

  for (i = 0; i < locations_programs.length; i++) {  
    var id = 'programs' + i;

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
      map: map
      ,id: id
      ,icon: 'http://www.christielakekids./_images/new/blue_circle.png'
      ,url: locations_programs[i][5]
      ,zIndex:100
    });



      google.maps.event.addListener(marker, 'mouseover', function(event) {
          this.setIcon('http://www.christielakekids./_images/map_pins/events/canoe-for-kids.png');
      });
      google.maps.event.addListener(marker, 'mouseout', function(event) {
          this.setIcon('http://www.christielakekids./_images/new/blue_circle.png');
      });



  }
}
  google.maps.event.addDomListener(window, 'load', initialize); 
        </script>
      </head>
      <body>
             <div id="map"></div>
       </body>
    </html>

本文标签： javascriptGoogle Maps APIHover on markers and show imageStack Overflow