Question

Hi I have this code which adds a marker on the map every time I hit the add marker button. Any advice of how I could change the markers icon everytime that a marker is added on the map ? Many thanks.

   function initialize() {
    var myLatlng = new google.maps.LatLng(40.779502, -73.967857);

    var myOptions = {
        zoom: 7,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    TestMarker();
      }
  google.maps.event.addDomListener(window, 'load', initialize);


  function addmarker(location) {
    marker = new google.maps.Marker({
        position: location,
        draggable:true,
        map: map
        for()
     });
    }

// Testing the addMarker function
function TestMarker() {
       CentralPark = new google.maps.LatLng(40.779502, -73.967857);
       addmarker(CentralPark);
  }
Was it helpful?

Solution

You can use Google's custom map markers such as the following code snippet they provide:

var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: iconBase + 'schools_maps.png' });

In order to create a new icon every time a user adds a marker you could create an array of image locations and then traverse through the array every time the user added a new one. Here is some more documentation on Google's custom markers:

https://developers.google.com/maps/tutorials/customizing/custom-markers

You could also define specific markers for specific features and pass the feature as a parameter. Google also provides some sample code for this functionality:

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var icons = { parking: { icon: iconBase + 'parking_lot_maps.png' }, library: { icon: iconBase + 'library_maps.png' }, info: { icon: iconBase + 'info-i_maps.png' } };

function addMarker(feature) { var marker = new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map }); }

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top