Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to customize markers in Google Map in Javascript?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 268
    Comment on it

    How to customize Map Marker:

    This blog will help you understand how to customize the markers in google map. Specify the icon option on MarkerOptions to change the marker’s icon. The icon option can be either a string (the URL to the marker icon), or an Icon object. Write this simple lines of code:

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: iconBase + 'schools_maps.png'
    });
    

    For different marker icons we can customize in this way:

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = {
      parking: {
        icon: iconBase + 'parking_lot_maps.png'
      },
      library: {
        icon: iconBase + 'library_maps.png'
      },
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };
    
    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    }
    

    All done!

    Thanks for reading the blog

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: