Multi markers on Google maps

Question

Hello nice people of SO,

I am looking for a little guidance in relation to Google maps.. I am looking to set different styled markers on Google maps. The styles I want will be influenced from variables help in a database, ie Hotel, Cafe, Bed'n'breakfast.

I would like to alter the icons depending on these values. I have changed the stock icons with little issues, but to change them depending on the values from the DB is an issue.

I have values passed from the DB in a diff file and can show them on the map. For instance I am using point.hotelComments to gather hotel comments.. All are showing up OK so my connection and printing is fine. I have the amenity I want to influence the change stored in the DB user "Type" Any help or guidance is greatly appreciated!

The code I am using to date to print onto the map is:

<div id="map-container" class="col-md-12"></div>

            <script>
                var markers = [];
                var map;

                  function initialize()
                   {

                        var mapOptions = 
                        {
                          center: new google.maps.LatLng(53.273224, -9.051864),
                          zoom: 15
                        };

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

                        $.ajax
                        ({
                            type: "GET",
                            dataType: "json",
                            url: "http://localhost/Project/mapdata2.php",
                            success: function (data) 
                            {
                                $.each(data,function(index,point)
                                {
                                    createMarker(point.Lat, point.Lng, map, point.hotelName, point.type, point );
                                });

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


            function createMarker(Lat, Lng, map, title, Type, point)
                {
                var latlng = new google.maps.LatLng(Lat, Lng);
                var iconBase = 'http://maps.google.com/mapfiles/ms/icons/';
                //http://maps.google.com/mapfiles/ms/icons/coffeehouse.png
                //http://maps.google.com/mapfiles/ms/icons/coffeehouse.shadow.png
                var marker = new google.maps.Marker(
                    {
                        position: latlng,
                        map: map,
                        title: title,
                        type: Type,
                        icon: iconBase + 'coffeehouse.png'

                        //icon: iconBase + 'icon_' + Type + '.png' 
                    });

                marker.setMap(map);

                markers.push(marker);



                //Adds content 
                      var contentString = '<div id="content">'+
                          '<div id="siteNotice">'+
                          '</div>'+
                          '<h1 id="firstHeading" class="leadBigBlue"> ' + point.hotelName +' </h1>'+   point.fullAddress +
                          '<div id="bodyContent">'+
                          '<p><b>' + point.hotelName + '</b>, ' +  point.hotelComments +  '  </p> ' +
                          '<p><b> Language 1 </b>   ' +  point.hotelLang +  ' </p>'+
                          '<p><b> Language 2</b>   ' +  point.hotelLang2 +  ' </p>'+
                          '<p><b> Cultures </b>   ' +  point.Cult +  ' </p>'+
                          '<p><b>Website</b> <a href="  ' +  point.localWeblink +  ' ">'+
                          'Press Here</a> </p>'+

                          '</div>'+
                          '</div>';

                      var infowindow = new google.maps.InfoWindow({
                          content: contentString
                      });

                      google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map,marker);
                      });
                }


    </script>

Answer 1

For your unique styling issue:

We do something like this....See if you can follow along and implement.

...and if you have a question left me know because some things are happen outside of this script (the data stuff).

google.load('maps', '3', {
other_params: 'sensor=false'
});

google.setOnLoadCallback(initialize);

var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';

    function initialize() {
    var center = new google.maps.LatLng(41.45,-98.87);

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < data.count; i++) {
    spinnerUp(i);
    }

        function spinnerUp() {

            var data_mapper = data.locationstuff[i];

            var latLng = new google.maps.LatLng(data_mapper.latitude,data_mapper.longitude);

            var boxText = "<div style='border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;'>";
                boxText += data_mapper.title + "<br>" + data_mapper.address + "<br>" + data_mapper.city + ", " + data_mapper.zip;
                boxText += "</div>";

            switch (data_mapper.iconSpecial)
                {
                case 0:
                  var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
                  break;
                case 1:
                  var iconColorSpecial = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
                  break;
                }

            var marker = new google.maps.Marker({position: latLng,icon:iconColorSpecial});

            var infowindow = new google.maps.InfoWindow({
                                                    content: boxText
                                                    ,disableAutoPan: false
                                                    ,maxWidth: 0
                                                    ,pixelOffset: new google.maps.Size(0, 0)            
                                                    ,zIndex: null
                                                    <!---,boxStyle: { 
                                                    background: "url('http://www.garylittle.ca/map/artwork/tipbox.gif') no-repeat"
                                                    ,opacity: 0.75
                                                    ,width: "280px"
                                                    }--->
                                                    ,closeBoxMargin: "10px 2px 2px 2px"
                                                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                                                    ,infoBoxClearance: new google.maps.Size(1, 1)
                                                    ,isHidden: false
                                                    ,pane: "floatPane"
                                                    ,enableEventPropagation: false});

        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, this);});
        markers.push(marker);       
        }

        var markerCluster = new MarkerClusterer(map, markers);
    }
google.maps.event.addDomListener(window, 'load', initialize);