How to show items on google map similar to the way google shows its results

Question

I need to show a map with multiple markers, Ive found this question which has what I am looking for but the problem is I need to show the marker of each item next to it.

Answer 1

It sounds like you want letters instead of numbers inside your pin:

// Function to create the dynamic marker
function pinImage(i) {
    var letter = String.fromCharCode(i + 65);  // 'A' is 65.
    return new google.maps.MarkerImage(
        "http://www.googlemapsmarkers.com/v1/" + letter + "/" + pinColor + "/",
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
}

Also, you need to create objects that keep track of the address, latlng, and index of each of your markers. I suggest you use map.data to do this. https://developers.google.com/maps/documentation/javascript/reference#Data

var addresses = ['New York', 'San Francisco'];
addresses.forEach(function(address, i) {
    // Create a feature.
    var feature = map.data.add({
        'id': i,
        'properties': {'address': address}
    });

    // Display the feature in the list.
    $('.address-list').append($('
')
        .append($('').attr('src', pinImage(i)))
        .append($('
').text(address)));
    // Do more fancy things here

    // Geocode the feature and position it on the map.
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            feature.setGeometry(results[0].geometry.location);
            if (i == 0) {
                map.setCenter(results[0].geometry.location);
            }
        }
    });
});

Then you can control the display of the markers like this:

map.data.setStyle(function(feature) {
    return {
        title: feature.getProperty('address'),
        zIndex: feature.getId(),
        icon: pinImage(feature.getId()),
        shadow: pinShadow
    };
});