google map API v3 change marker icon on click?

google-maps-api-3

Solution

Try this.

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

Problem

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> ```

Original source