CODEWITHSUNDEEP
google-maps-api-3
user796443
user796443

Reputation:

google map API v3 change marker icon on click?

Following google documentation up to changing the marker icon was easy. But I'm stuck, I don't know how to change image when marker is clicked?

My code so far:

<script>
  function initialize() {

    var latlngPos = new google.maps.LatLng(<?php echo $event_google_map_coordinates; ?>);

    var mapOptions = {
      zoom: 16,
      center: latlngPos,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var marker = new google.maps.Marker({
      position: latlngPos,
      map: map,
      //animation: google.maps.Animation.BOUNCE,
      icon: '<?= get_bloginfo("template_url"); ?>/images/marker.png'
    });

    var infowindow = new google.maps.InfoWindow({
      position: latlngPos,
      maxWidth: 200,
      content: "<h3><?php the_title(); ?></h3><?php if ($event_address_meta) {_e($event_address_meta);} ?>"
    });

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

    //open infowindow onload
    //infowindow.open(map);

  }

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'http://maps.googleapis.com/maps/api/js?key=AIzaSyCK3XUMWOH0GIiuj3VeprakKZXoo_nDV08&sensor=false&' +
    'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript; < /script>

<div id="googlemap_event"></div>

Upvotes: 21

Views: 61683

Answers (3)

ehmoratallar
ehmoratallar

Reputation: 71

I have modified the previous fiddle and enabled to deselect the marker.

http://jsfiddle.net/zsw76pq9/

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

    //Change the marker icon
    marker.setIcon('https://www.google.com/mapfiles/marker_black.png');
});

Upvotes: 7

Bryan Weaver
Bryan Weaver

Reputation: 4473

You need to set the marker icon in the click event.

google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map);
          //Change the marker icon
          marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
     });

Here is an example: jsfiddle

Upvotes: 11

Shashank Shukla
Shashank Shukla

Reputation: 1146

Try this.

//open onclick
   google.maps.event.addListener(marker, 'click', function() {
    marker.setIcon("Your Image");                                    
    infowindow.open(map);
    });

Upvotes: 47

Related Questions