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());
            }
        }
    });
});
Share:
11,309

Related videos on Youtube

sergserg
Author by

sergserg

sergserg

Updated on September 15, 2022

Comments

  • sergserg
    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.