How to change the icon Gmaps.js uses in Google Maps?
11,309
Changing the icon on a marker is quite simple.
If you read the documentation, notice it says:
Also, createMarker accepts any option defined in google.maps.MarkerOptions and any marker event defined in google.maps.Marker ('Events' section).
And if you read the Google documentation, it's just a matter of calling:
icon: "some-url-here"
In my case it was:
$('input[name="Address"]').blur(function () {
GMaps.geocode({
address: $('input[name="Address"]').val(),
callback: function (results, status) {
if (status == 'OK') {
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng(),
icon: "/images/mapicon.png"
});
$('input[name="Longitude"]').val(latlng.lng());
$('input[name="Latitude"]').val(latlng.lat());
}
}
});
});
Related videos on Youtube
Comments
-
sergserg over 1 year
How can I use the latest version of GMaps.js to change the pin icon I set in code?
Here's what I'm trying to do:
$('input[name="Address"]').blur(function () { GMaps.geocode({ address: $('input[name="Address"]').val(), callback: function (results, status) { if (status == 'OK') { var latlng = results[0].geometry.location; map.setCenter(latlng.lat(), latlng.lng()); map.addMarker({ lat: latlng.lat(), lng: latlng.lng(), icon: { image: "http://i.imgur.com/12312.png" } }); } } }); });
When running this script, the following errors flare up in Firebug's console:
"NetworkError: 404 Not Found - http://localhost:17680/Account/undefined" "NetworkError: 404 Not Found - http://localhost:17680/Account/undefined"
I don't understand why it's trying to HTTP GET that URL since I've never invoked it anywhere in the code.