Home/ Questions/Q 9234507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T06:48:23+00:00

I’m having trouble getting a custom marker to appear using an array. My code

  • 0

I’m having trouble getting a custom marker to appear using an array. My code looks like this

<html>
  <head>
    <style>
    body { font-family: Helvetica; }
    .map-content h3 { margin: 0; padding: 5px 0 0 0; }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA6VosQrKQOjoTbDSp4Kk4BHvofOJFUfZU&sensor=true"></script>
    <script>
    // Set the Map variable
        var map;
        function initialize() { 
            var myOptions = {
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var all = [
            ["Indianapolis International Airport", "7800 Col. H. Weir Cook Memorial Drive", "Indianapolis", "IN", "46241", "39.71449", "-86.29842", "airport"], 
            ["Location 2", "7205 Olmstead Dr", "Burlington", "NC", "27215", "36.069974", "-79.548101", "airport",],
            ["Location 3", "W Market St", "Graham", "NC", "27253", "36.0722225", "-79.4016207", "airport"],
            ["Location 4", "Mt Hermon Rock Creek Rd", "Graham", "NC", "27253", "35.9826328", "-79.4165216", "airport"],
            ["Location 5", "415 Spring Garden St", "Greensboro", "NC", "27401", "36.06761", "-79.794984", "airport"]
        ];                          
        var infoWindow = new google.maps.InfoWindow;
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
        // Set the center of the map
        var pos = new google.maps.LatLng(36.0621881, -79.5101063);
        map.setCenter(pos);
        function infoCallback(infowindow, marker) { 
            return function() {
            infowindow.open(map, marker);

        };
        
        
   }            
   function setMarkers(map, all) {  
    for (var i in all) {                                        
            var name    = all[i][0];
            var address = all[i][1];
            var city    = all[i][2];
            var state   = all[i][3];
            var zip     = all[i][4];
            var lat     = all[i][5];
            var lng     = all[i][6];
            var image   = all[i][7];
            var latlngset;
            latlngset = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({  
              map: map,  title: city,  position: latlngset, icon: image,
            });
            var airport = new google.maps.MarkerImage(
            'images/airport.png',
            new google.maps.Size(32,37),
            new google.maps.Point(0,0),
            new google.maps.Point(16,37)
             );
            var content = '<div class="map-content"><h3>' + name + '</h3>' + address + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="http://maps.google.com/?daddr=' + address + ' ' + city + ', ' + state + ' ' + zip + '" target="_blank">Get Directions</a></div>';                   
            var infowindow = new google.maps.InfoWindow();
              infowindow.setContent(content);
              google.maps.event.addListener(
                marker, 
                'click', 
                infoCallback(infowindow, marker)
              );
          }
        }           
        // Set all markers in the all variable
        setMarkers(map, all);
      };
      // Initializes the Google Map
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas" style="height: 500px; width: 800px;"></div>
  </body>
</html>

So far when I set var image= airport it works. When i do icon:airport it works but when I try to get image refer back to var image it doesn’t work. Can someone help me out? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    image is not an icon, it is a string (and not a URL):

    var marker = new google.maps.Marker({  
  map: map,  title: city,  position: latlngset, icon: image,
});

    airport is an icon (actually a deprecated MarkerImage, but it would work), but isn’t being used.

    var airport = new google.maps.MarkerImage(
  'images/airport.png',
  new google.maps.Size(32,37),
  new google.maps.Point(0,0),
  new google.maps.Point(16,37)
);

    Something like this should work:

    var icon = null;
if (image == "airport") icon = airport;
var marker = new google.maps.Marker({  
  map: map,  title: city,  position: latlngset, icon: icon
});

    working exampe (with a different custom icon)

    • 0