CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
H.HISTORY
H.HISTORY

Reputation: 518

Multiple markers on google maps with different icons?

I'm trying to use multiple Markers on google maps with different icons.

something like this:

var locations = [
    ['Me', 'ss00sd', 'meicon.png'],
    ['Location 2 Name', 'rm191qw', 'house.png'],
    ['Location 3 Name', 'ss68ll', 'house.png'],
];

but I have no idea how to achieve this.

I have created this jsfiddle with what I have so far: http://jsfiddle.net/1Lf0rowp/

EDIT: I noticed the code doesn't run in jsfiddle for some reason it works fine in my own page! but I have included all my code in jsfiddle as well.

code snippet (from jsfiddle):

var locations = [
    ['Location 1 Name', 'ss00sd', 'meicon.png'],
   	    ['Location 2 Name', 'rm191qw', 'house.png'],
    ['Location 2 Name', 'ss68ll', 'house.png'],
];

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    geocoder = new google.maps.Geocoder();

    for (i = 0; i < locations.length; i++) {
        geocodeAddress(locations, i);
    }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
    var title = locations[i][0];
    var address = locations[i][1];
    var url = locations[i][2];
    geocoder.geocode({
        'address': locations[i][1]
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                icon: 'meicon.png',
                map: map,
                position: results[0].geometry.location,
                title: title,
                animation: google.maps.Animation.DROP,
                address: address,
                url: url
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
}

function infoWindow(marker, map, title, address, url) {
    google.maps.event.addListener(marker, 'click', function () {
        var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div></p></div>";
        iw = new google.maps.InfoWindow({
            content: html,
            //maxWidth: 350
        });
        iw.open(map, marker);
    });
}

function createMarker(results) {
    var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
    })
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
    infoWindow(marker, map, title, address, url);
    return marker;
}
html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map_canvas" style="width:100%; height:900px;"></div>

Upvotes: 0

Views: 7099

Answers (1)

Ivan Jovović
Ivan Jovović

Reputation: 5298

You are very close, just include url after icon: when you're creating Marker:

var marker = new google.maps.Marker({
                icon: url,

I have changed your fiddle a bit to make it work : you have forgot to invoke initialize() and also changed url data to your icons, so now your locations array looks like this: 

 var locations = [
        ['Location 1 Name', 'ss00sd', 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png'],
        ['Location 2 Name', 'rm191qw', 'https://www.mapsmarker.com/wp-content/plugins/leaflet-maps-marker-pro/leaflet-dist/images/marker.png'],
        ['Location 2 Name', 'ss68ll', 'http://www.worldheritageoutlook.iucn.org/resources/heritage_site_map_pin.png'],
    ];

Working fiddle: http://jsfiddle.net/1Lf0rowp/1/

Upvotes: 3

Related Questions