CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
shocky shocky
shocky shocky

Reputation: 55

How to highlight a particular marker on a multiple marker map

I have situation here, kindly help me in resolving this
On a map with multiple markers i am using two variables for longitude and latitude and using them as center point of the map.

How can I

  1. use the marker for these lat/long used for center to bounce or
    animate
  2. change the icon of this centered marker to be different than others
  3. add additional info in the info box.

thanks in advance for the help

-----here is the code 

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

var lat1 = '-33.92'
var long1 = '151.25'

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(lat1, long1),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));


    }
  </script>
</body>
</html>

Upvotes: 3

Views: 10695

Answers (1)

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17745

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var lat_center = -33.923036,
        long_center = 151.259052;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(lat_center, long_center),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i, text;

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

      marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
      });

      text = locations[i][0];

      if(locations[i][1] === lat_center && locations[i][2] === long_center) {

          marker.setAnimation(google.maps.Animation.DROP);
               marker.setIcon('http://maps.google.com/intl/en_us/mapfiles/ms/micons/purple.png');
        text += '<br>' + 'Additionl text for centered marker';
      }

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

  </script>
</body>
</html>

List of markers available by google

More about markers

Upvotes: 6

Related Questions