Replace the icons on google maps to Images

Question

I'm trying to create Complex icons on Google maps which I actually did but now I want to change those icon to display images instead of constant icon that been taking from a folder and attached to that the lat,lng for every single image.

(I'm thinking to create a list of images and send it to the function but it doesn't worked) any suggestion how to do so?

Here is my code:

    function setLocationMap() {
            var selectedObj = results.pop();
            var qLat = parseFloat(selectedObj["LocationLat"]);
            var qLong = parseFloat(selectedObj["LocationLng"]);
            var qZoom = parseFloat(selectedObj["Zoom"]);
            var qSatelite = (selectedObj["Satellite"].toLowerCase() === "true");


            var qMapTypeId = google.maps.MapTypeId.ROADMAP
            if (qSatelite) qMapTypeId = google.maps.MapTypeId.HYBRID
//            var qMapTypeId = google.maps.MapTypeId.SATELLITE
//            var qMapTypeId = google.maps.MapTypeId.HYBRID
//            var qMapTypeId = google.maps.MapTypeId.TERRAIN           

            if (qLat != 0 && qLong != 0) {
                var myLatlng = new google.maps.LatLng(qLat, qLong);
                var mapOptions = {
                    zoom: qZoom,
                    center: myLatlng,
                    mapTypeId: qMapTypeId
                }

                var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                map.setTilt(45);
                map.setHeading(0);
                setMarkers(map, beaches);

            }
        }

        var beaches = [
          ['9-47 Hall Street', 40.698345, -73.968748, 4],
          ['9-47 Hall Street', 40.698552, -73.969338, 9],
          ['9-47 Hall Street', 40.698324, -73.969199, 8],
          ['9-47 Hall Street', 40.69807, -73.968884,  7],
          ['9-47 Hall Street', 40.698017, -73.968699, 6],
          ['9-47 Hall Street', 40.698552, -73.969338, 5],
          ['9-47 Hall Street', 40.698976, -73.969489, 3],
          ['9-47 Hall Street', 40.699391, -73.970052, 2],
          ['9-47 Hall Street', 40.698017,-73.969163,  1]
      ];

        function setMarkers(map, val) {


         var contentString = 
         '<div id="content">' +
         '<div id="siteNotice">' +
         '</div>' +
         '<h3 id="firstHeading" class="firstHeading">Dispatch Information</h3>' +
         '<div id="bodyContent">' +
         '<p><b>Dispatch Officer</b>, FirstName: <b>Alon</b>, Last Name: <b>Gal</b> Site Manager</p>' +
         '</div>' +
         '</div>';
          var infowindow = new google.maps.InfoWindow({
          content: contentString
          });



        var image = {
        url:  '../Images/Layout/onDuty.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        size: new google.maps.Size(22, 19),
        // The origin for this image is 0,0.
        origin: new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(0, 32)
                  };

      var shape = {
          coord: [1, 1, 1, 20, 18, 20, 18 , 1],
          type: 'poly'
      };
      for (var i = 0; i < val.length; i++) {
          var beach = val[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            draggable: true,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
        });
         google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(map,marker);
        });
     }
    }

    google.maps.event.addDomListener(window, 'load', initialize);

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, Jan 23 '14 at 23:33

score 0 · Accepted Answer · answered Jan 24 '14 at 04:49

I don't fully understand your question. For simple image markers, just send a string containing the URL to an image as the icon property of the google.maps.Marker options:

   var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        draggable: true,
        icon: '../Images/Layout/onDuty.png',
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });

Source: https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

Replace the icons on google maps to Images

1 Answers1