19

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?

4 Answers 4

41
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
  });
5
  • 2
    cdn.com/my-custom-icon.png is just a dummy address, you should use a valid address to a valid image, also you have declared two times the same identical var "simplerweb" you can remove one of it Apr 29, 2012 at 23:00
  • you means anywhere? yes the image can be hosted wherever you want! Apr 29, 2012 at 23:15
  • I'm using my aws s3 bucket to get an image.@Luca but it's not working on ios. my project is on nativescript-angular. It says null, even if I assign a url.
    – Heena Vora
    Jan 21, 2020 at 7:09
  • @Heena Vora: i guess because in mobile development you can't include remote resource for security reason... most probably you should figure out a way to store the image locally. Jan 22, 2020 at 18:40
  • For local images it works fine. The above code with URL as icon is not working for me.
    – Heena Vora
    Jan 23, 2020 at 7:27
6

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

5

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.

0

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.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.