CODEWITHSUNDEEP
imagegoogle-mapsgoogle-maps-markers
Hudo_zg
Hudo_zg

Reputation: 13

Adding image to google maps marker for this code

I'm trying to add custom image to marker on this code but I don't know how. I tryed adding new var z and put into image but it's not working. I found more and more codes for similar thing but this looks really easy and I'm quite new in this area do I would like to start with something not that complicated.

I found this code here: http://stiern.com/tutorials/adding-custom-google-maps-to-your-website/

function initialize() {
        var map_options = {
            center: new google.maps.LatLng(45.813029,15.977895),  <!-- centar mape -->
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var info_window = new google.maps.InfoWindow({
        content: 'loading'
    });

    var t = [];
    var x = [];
    var y = [];
    var h = [];

    t.push('Klinček');
    x.push(45.812619);
    y.push(16.007195);
    h.push('<p><strong>Caffe bar Klinček</strong><br/>Cijena: 15kn (Ožujsko točeno)<br/> Adresa: Kušlanova 52</p>');


    var i = 0;
    for ( item in t ) {
        var m = new google.maps.Marker({
            map:       google_map,
            animation: google.maps.Animation.DROP,
            title:     t[i],
            position:  new google.maps.LatLng(x[i],y[i]),
            html:      h[i]

        });

        google.maps.event.addListener(m, 'click', function() {
            info_window.setContent(this.html);
            info_window.open(google_map, this);
        });
        i++;
    }
}

initialize();

Upvotes: 1

Views: 14540

Answers (1)

Ankit
Ankit

Reputation: 338

I modified a piece of code from your above posted code.

var i = 0;
var image1 = 'beachflag.png';
var image2 = 'roadflag.png';
var image3 = 'railflag.png';
var image;
for ( item in t ) {

     if(condition1){
      image = image1;
     }
     if(condition2){
      image = image2;
     }
     if(condition3){
      image = image3;
     }
     var m = new google.maps.Marker({
        map:       google_map,
        animation: google.maps.Animation.DROP,
        title:     t[i],
        position:  new google.maps.LatLng(x[i],y[i]),
        html:      h[i],
        icon: image

    });
    .........
}//for loop ends

For more info https://developers.google.com/maps/documentation/javascript/overlays#Icons

Upvotes: 1

Related Questions