Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Adding custom icons marker in Google map

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 345
    Comment on it

    While integrating the Google map we need to display the location according to the latitude and the longitude.

    So in that case we need to make the use of the marker functionality for displaying it.

    So if we want to change the image that the location is displaying using  its marker we can change it if we want to.

     

    function initialize() {
            var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
            var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    //  marker:true
    };
    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var image;
    for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    
    var contentString = '<div id="content" style="margin-left:15px; margin-top:3px;overflow:hidden;">' +
    '<div id="bodyContent">' + '<img src=' + data.image + ' style="width:172px;height:45px;"  alt="WebStreet.in"/>' + '<br><font style="color:darkblue;font:11px tahoma;margin-left:5px;">' + data.title + ' Your Trusted IT Solutions Provider</font>' +
    '</div>' +
    '</div>';
    
    
    //var marker = new google.maps.Marker({
    
    //position: myLatlng,
    //map: map,
    //title: data.title,
    //});
    
    var marker = new google.maps.Marker({
        map: map,
        // draggable:true,
        // animation: google.maps.Animation.DROP,
        position: myLatlng,
        title: data.title,
        icon: 'http://maps.google.com/mapfiles/kml/pal3/icon55.png' // null = default icon
    });
    
    

     

    We have the icon  property where we can put the path of the image we want to display.

 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: