How to show different markers on google map

Question

I have a google map that displays multiple markers with the code below. I would like to group some of them and have a different icon, if it is possible I would like to set something like

['Bondi Beach', -33.890542, 151.274856 type="restaurant"],
['Bondi RD', -33.89457, 151.26826 type="hotel"],

etc in the markers and then show different icons based on what type it is.

var markers1 = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Bondi RD', -33.89457, 151.26826],
    ['Wellington St', -33.89136, 151.26474],
    ['Bondi RD', -33.89457, 151.26826],
    ['Belleve Hill', -33.88673, 151.25839],
    ['Belleve RD', -33.88424, 151.25427],
    ['Blair St', -33.88509, 151.27058],
    ['Wollahra', -33.88951, 151.24500],
    ['Double Bay', -33.87783, 151.23985],
    ['Kings Cross', -33.87498, 151.21788],
    ['Shaw St', -33.88110, 151.27088],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['West of sydney', -33.87270, 151.15746],
    ['Maroubra Beach', -33.950198, 151.259302]
];


function initializehotell() {
    alert("init hotell");
    var latlng = new google.maps.LatLng(-33.92, 151.25);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map1 = new google.maps.Map(document.getElementById("map_canvashotell"),myOptions);
    image = new google.maps.MarkerImage("http://www.mydomain.com/images/googlemap/info.png",new google.maps.Size(32, 45));
  shadowi = new google.maps.MarkerImage("http://www.mydomain.com/images/googlemap/shadow.png",new google.maps.Size(51, 37));
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers1.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers1[i][1], markers1[i][2]),
            map: map1,
            shadow: shadowi,
          icon: image
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(markers1[i][0]);
                infowindow.open(map1, marker);
            }
        })(marker, i));
    }
}

I guess that I have to change it in the loop position: new google.maps.LatLng(markers1[i][1], markers1[i][2]) somehow, but I´m not sure how. So any input really appreciated, thanks.

I can give an answer on how to structure a json object containing the right information. But what do you want to hold in addition to the image? Size, shadow? — Alkis Kalogeris, Jun 13 '13 at 15:29
If I understand correctly you need to hold the info you put in MarkerImage in a json object and access that by type (which will be your key, to access the details) — Alkis Kalogeris, Jun 13 '13 at 15:33
alkis, thanks. I would need size and shadow, I´ll think thats all I need. — Claes Gustavsson, Jun 13 '13 at 16:20
Example: If I set type="restaurant" then I would like to show red.png and if its a type="hotel" then I would like to show a gren.png and so on for more types. — Claes Gustavsson, Jun 13 '13 at 16:22
possible duplicate of [Colour the first marker of a Google Map a different colour](http://stackoverflow.com/questions/16900210/colour-the-first-marker-of-a-google-map-a-different-colour) — geocodezip, Jun 13 '13 at 16:32
Mike Williams' classic Google Maps API v2 [categories example](http://econym.org.uk/gmap/categories.htm) ported [to the v3 api](http://www.geocodezip.com/v3_MW_example_categories.html) — geocodezip, Jun 13 '13 at 16:35

score 0 · Accepted Answer · edited Jul 06 '20 at 05:56

typeObject = {
    "hotel" : {
         "icon" : "HERE_IS_YOUR_ICON",
         "shadow" : "HERE_IS_YOUR_SHADOW",
         "icon_size" : [32, 52],
         "shadow_size" : [62, 72]          
     },
    // continue for every type
}

Now you have a JSON object where it's elements are JSON objects themselves. You change your array a little bit example follows,

['Bondi Beach', -33.890542, 151.274856, "hotel"]

So when you create a marker

var icon = typeObjcet[markers1[i][3]]['icon'];
var shadow = typeObjcet[markers1[i][3]]['shadow'];
var iconSize = typeObjcet[markers1[i][3]]['icon_size']; 
var shadowSize = typeObjcet[markers1[i][3]]['shadow_size'];    

marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers1[i][1], markers1[i][2]),
            map: map1,
            icon: new google.maps.MarkerImage(icon, new google.maps.Size(iconSize[0], iconSize[1])),
            shadow: new google.maps.MarkerImage(shadow, new google.maps.Size(shadowSize[0], shadowSize[1]))
 });

It could be polished I guess, but this is a rough example of having dynamic types. You just fill the data on the typeObject for every type you want and access it by the type attribute in your initial array.

UPDATE

Of course it could be like this

  typeObject = {
        "hotel" : {
             "icon" : new google.maps.MarkerImage("red.png", new google.maps.Size(32, 42)),
             "shadow" : new google.maps.MarkerImage("shadow.png", new google.maps.Size(58, 68))         
         },
        // continue for every type
    }

    var icon = typeObject[markers1[i][3]]['icon'];
    var shadow = typeObject[markers1[i][3]]['shadow'];

    marker = new google.maps.Marker({
                position: new google.maps.LatLng(markers1[i][1], markers1[i][2]),
                map: map1,
                icon: icon,
                shadow: shadow
     });

Thanks, I tryed with : bar = new google.maps.MarkerImage("../images/icons/bar.png",new google.maps.Size(32, 32)); and then ['Bondi Beach', -33.890542, 151.274856, bar], and this: icon: markers1[i][3], but it didn´t work. Why can´t I have the variable bar in the array? — Claes Gustavsson, Jun 13 '13 at 18:00
If I set : ['Bondi Beach', -33.890542, 151.274856,'..images/icons/bar.png'], then it work but then I don´t know how to set the size off the icon? I have to test your codes. Thanks. — Claes Gustavsson, Jun 13 '13 at 18:04
Your first comment is wrong. I'm using the typeObject for a reason. If you want to do something else from what I suggested it then update your question so I can see what you want. Don't take pieces of my example unless you are sure what you are doing. If you don't, take it to the letter, and do exactly what I posted — Alkis Kalogeris, Jun 13 '13 at 18:20
I use the typeObject for scalabality. You can put the size inside your initial array, the icon and shadow too. But then, let's say you have two places where the type is hotel, you will have to put the same data (icon, shadow etc) in both of them. This way, you put all the data you want in typeObject and you find them by their type that you have in your initial array — Alkis Kalogeris, Jun 13 '13 at 18:26
Thanks, I meant that I tested before You posted your examples, and that I will test it tomorrow. — Claes Gustavsson, Jun 13 '13 at 18:48

How to show different markers on google map

1 Answers1