Javascript 谷歌地图上的多标记

你好，这么好的人

我正在寻找有关谷歌地图的一些指导。。 我希望在谷歌地图上设置不同样式的标记。我想要的风格将受到数据库中变量帮助的影响，即酒店、咖啡馆、床上早餐

我想根据这些值更改图标。 我已经更改了股票图标，但是根据数据库中的值更改股票图标是一个问题

我在一个diff文件中从DB传递了值，并可以在地图上显示它们。例如，我使用point.hotelComments收集酒店评论。。所有都显示正常，所以我的连接和打印很好。我有我想要影响DB用户“类型”中存储的更改的便利性。非常感谢任何帮助或指导

到目前为止，我在地图上打印的代码是：

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

var标记=[]；
var映射；
函数初始化（）
{
变量映射选项=
{
中心：新google.maps.LatLng（53.273224，-9.051864），
缩放：15
};
map=new google.maps.map（document.getElementById（“地图容器”），mapOptions）；
$.ajax
({
键入：“获取”，
数据类型：“json”，
url:“http://localhost/Project/mapdata2.php",
成功：功能（数据）
{
$。每个（数据、函数（索引、点）
{
createMarker（point.Lat、point.Lng、map、point.hotelName、point.type、point）；
});
}   
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
功能createMarker（纬度、液化天然气、地图、标题、类型、点）
{
var latlng=新的google.maps.latlng（Lat，Lng）；
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(
{
位置：latlng，
地图：地图，
标题:标题,，
类型：类型，
图标：iconBase+“coffeehouse.png”
//图标：iconBase+'icon_'+Type+'.png'
});
marker.setMap（map）；
标记器。推（标记器）；
//添加内容
var contentString=''+
''+
''+
''+point.hotelName+''+point.fullAddress+
''+
“”+point.hotelName+，“+point.hotelComments+”
”+
“语言1”+point.hotelLang+”
'+
“语言2”+point.hotelLang2+”
'+
“文化”+point.Cult+”
'+
“网站
”+
''+
'';
var infowindow=new google.maps.infowindow({
内容：contentString
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}

针对您独特的造型问题：

我们会这样做……看看你是否能跟进并实施

…如果您有什么问题留给我，我会知道，因为有些事情发生在这个脚本之外（数据内容）

google.load（'maps'，'3'{
其他参数：“传感器=假”
});
setOnLoadCallback（初始化）；
var-markerClusterer=null；
var-map=null；
var imageUrl=http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF，008CFF，000000&ext=.png'；
函数初始化（）{
var center=newgoogle.maps.LatLng（41.45，-98.87）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var标记=[]；
对于（变量i=0；i”+data\u mapper.address+“
”+data\u mapper.city+”，“+data\u mapper.zip；
文本框+=“”；
开关（数据映射器.iconSpecial）
{
案例0：
变量iconColorSpecial=”http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
打破
案例1：
变量iconColorSpecial=”http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
打破
}
var marker=new google.maps.marker（{position:latLng，icon:iconcolorsecial}）；
var infowindow=new google.maps.infowindow({
内容：boxText
，disableAutoPan:false
，最大宽度：0
，pixelOffset:new google.maps.Size（0,0）
            <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>

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);