CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markers
andy
andy

Reputation: 2754

How do you create a Marker with a custom icon for google maps API v3?

I've been reading https://developers.google.com/maps/documentation/javascript/overlays for a while now and I can't seem to get a custom icon for my map working.

Here is my javascript:

var simplerweb = new google.maps.LatLng(55.977046,-3.197118);
var marker;
var map;

function initialize() {
    var myOpts = {
        center:    simplerweb,  
        zoom:      15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOpts);
    marker = new google.maps.Marker({
        map:        map,
        draggable:  true,
        animation:  google.maps.Animation.DROP,
        position:   simplerweb
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Any pointers for a complete beginner with gmaps?

Upvotes: 19

Views: 161162

Answers (4)

johnnn
johnnn

Reputation: 200

My recommendation is to use "Overlayview" component as an alternative to Marker because you can use any html element inside "Overlayview" component. This is the trick I use to get around marker component limitations.

Upvotes: 0

Luca Filosofi
Luca Filosofi

Reputation: 31173

marker = new google.maps.Marker({
    map:map,
    // draggable:true,
    // animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(59.32522, 18.07002),
    icon: 'http://cdn.com/my-custom-icon.png' // null = default icon
  });

Upvotes: 42

Paolo177
Paolo177

Reputation: 366

Symbol You Want on Color You Want!

I was looking for this answer for days and here it is the right and easy way to create a custom marker:

'http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=xxx%7c5680FC%7c000000&.png' where xxx is the text and 5680fc is the hexadecimal color code of the background and 000000 is the hexadecimal color code of the text.

Theses markers are totally dynamic and you can create whatever balloon icon you want. Just change the URL.

Upvotes: 5

Aor Ampika
Aor Ampika

Reputation: 71

Try

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: 'http://imageshack.us/a/img826/9489/x1my.png',
      map: map
    });

from here

https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

Upvotes: 7

Related Questions