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?

回答1:

demo: http://so.lucafilosofi.com/how-do-you-create-a-marker-with-a-custom-icon-for-google-maps-api-v3

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
  });

NOTE: https://developers.google.com/maps/documentation/javascript/overlays#Icons

回答2:

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

回答3:

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.

回答4:

LatLng hello = new LatLng(X, Y);          // whereX & Y are coordinates

Bitmap icon = BitmapFactory.decodeResource(getApplicationContext().getResources(),
                R.drawable.university);   // where university is the icon name that is used as a marker.

mMap.addMarker(new MarkerOptions().icon(BitmapDescriptorFactory.fromBitmap(icon)).position(hello).title("Hello World!"));

mMap.moveCamera(CameraUpdateFactory.newLatLng(hello));

来源：https://stackoverflow.com/questions/10376617/how-do-you-create-a-marker-with-a-custom-icon-for-google-maps-api-v3

标签

javascript

google-maps-api-3

google-maps-markers