2

I want to have a circular marker that has a size and color that I can change dynamically in javascript. Has anyone done this before, or can point me towards the correct resources?

So far, I've got: (according to this: https://developers.google.com/maps/documentation/javascript/overlays#Icons)

//Map setup
    focusLocation = new google.maps.LatLng(51.5, -0.1);
    var mapOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: focusLocation
    };
    map = new google.maps.Map(document.getElementById('map'),mapOptions);

        setMarkers(map);

function setMarkers(map){
    marker = new google.maps.Marker({
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 10
        },
        map: map
    });
});

But the icons are as normal.

babbaggeii
  • 7,069
  • 17
  • 57
  • 106
  • Have you tried checking [the documentation](https://developers.google.com/maps/documentation/javascript/reference#Marker)? You can possibly combine `Marker` with `Symbol`. – Julian H. Lam Jun 07 '13 at 15:11
  • Thanks for the help. I've added the code that I've got currently, but I'm not sure why it's not working. – babbaggeii Jun 07 '13 at 15:16
  • Try adding all the properties that are in one of the working examples in the [documentation](https://developers.google.com/maps/documentation/javascript/overlays#Symbols) – geocodezip Jun 07 '13 at 15:42

2 Answers2

2

Your marker doesn't have a position. This works for me:

function setMarkers(map){
    marker = new google.maps.Marker({
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 10
        },
        position: map.getCenter(),
        map: map
    });
});

working example

geocodezip
  • 147,872
  • 13
  • 194
  • 222
0

You can change the marker icon using the javascript api as described here

https://developers.google.com/maps/documentation/javascript/reference#Marker

Specifically calling the SetIcon() method.

Smeegs
  • 8,796
  • 5
  • 34
  • 71