谷歌地图更改标记图标

Question

I am trying to change the marker icon and put my own icon with the the following code but insted of the icon nothing appears. Any suggestions please?

var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: 'c:\green.jpg'
});

Answer 1

You have to place your image (green.jpg) inside a folder that is accessible by your program. Put it inside WAR folder for example. If you just have an HTML,PHP,... page, then put the image in the same folder

Answer 2

The icon value is expected to be a URI, so you probably need to pass it a file URI in this case.

file:///C:/green.jpg

Obviously if you're going to use this on the web then you will need to use a URL of something that is served by a web server, rather than an image file on your computer.

Answer 3

Try using setIcon() function. Something like marker.setIcon("iconfile")

More information about this function here: https://developers.google.com/maps/documentation/javascript/reference#Marker

Search for: "setIcon(icon:string|MarkerImage)"

Answer 4

You could try using the relative path to the file:

var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: 'img/markers/brown_MarkerE.png'
});

I hope this helps.

Answer 5

You have to specify the protocol to use, in your case the file:// file transfer protocol

var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: 'http://c:/green.jpg'
});

Note: You have to store the image on your webserver to make it accessible to everyone. That way only user's with an image "grren.jpg" on there C partition will see the icon.

Answer 6

here is the full document for that with example :
https://developers.google.com/maps/tutorials/customizing/custom-markers

you can also use this code:

var marker = new google.maps.Marker({
    position: location,
    map: map,
    icon: 'your_img.png'
});