Question

I have a googlemap and I’m enhancing it with an horizontal sliding panel on the left, posibility to draw polygons and now I’m trying to add MarkerClusterer.
Without this line:

markerClusterer = new MarkerClusterer(googleMap, markers, {maxZoom: zoom, gridSize: size, styles: styles[style]});

It works perfect, for both, horizontal sliding panel on the left and posibility to draw polygons but, when I add that line I only get a gray box as a map (without controls for zooming in or out, so it’s not that I need to zoom out).

What could be the problem?

This is the View of the ASPNET MVC

@model IEnumerable<corp.MvcApplication.Models.GoogleMarker>
@using System.Threading;
@using System.Globalization;
@{
    ViewBag.Title = "Sync";
    Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
}

<script type='text/javascript' src='../../slide-panel-jquery/easing.js'></script> <!-- HORIZONTAL SLIDING PANEL-->
<script type="text/javascript" src="../../demo/polygon.js"></script> <!-- POLYGON-->
<script type="text/javascript" src="../../MarkerClusterer/markerclusterer.js"></script> <!-- MARKER CLUSTERER-->

<script language="javascript" type="text/javascript">
        var styles = [[{
                url: '../../MarkerClusterer/images/m1.png',
                height: 27,
                width: 30,
                anchor: [3, 0],
                textColor: '#FF00FF'
              },
              {
                url: '../../MarkerClusterer/images/m2.png',
                height: 36,
                width: 40,
                opt_anchor: [6, 0],
                opt_textColor: '#FF0000'
              },
              {
                url: '../../MarkerClusterer/images/m3.png',
                width: 50,
                height: 45,
                opt_anchor: [8, 0]
        }]];

        var selectedPolygon = 0;
        var creator = new Array();
        var markers = []; // For ClusterMarker
        var markerClusterer = null;

        function NewPolygon(i) {
          $('#items').append('<div id="poly'+i+'">Polygon '+i+' <a href="javascript:void(0)" onclick="RemovePolygon('+i+');return false;">[x]</a></div>');
          $('div[id*=poly]').removeClass('selected');
          $('#poly'+i).addClass('selected');
          $('#poly'+i).click(function () {
            selectedPolygon=i;
            $('div[id*=poly]').removeClass('selected');
            $(this).addClass('selected');
          });
        }

        function RemovePolygon(i) {
            creator[i].destroy();
            creator[i]=null;
            $('#poly'+i).remove();
        }

        $(document).ready(function () {
            var bounds = new google.maps.LatLngBounds();
            var options = {
                zoom : 14,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            var googleMap = new google.maps.Map($("#main-map")[0],options);
            var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });

            creator[0] = new PolygonCreator(googleMap);
            NewPolygon(0);

             $('#newPolygon').click(function(){ 
                    var i = creator.length;
                    selectedPolygon=i;
                    creator[i]=new PolygonCreator(googleMap);
                    NewPolygon(i);
             });         

            //reset
             $('#reset').click(function(){ 
                    creator[selectedPolygon].destroy();
                    creator[selectedPolygon]=null;
             });         

             //show paths
             $('#showData').click(function(){ 
                    $('#dataPanel').empty();
                    if(null==creator[selectedPolygon].showData()){
                        $('#dataPanel').append('Please first create a polygon');
                    }else{
                        $('#dataPanel').append(creator[selectedPolygon].showData());
                    }
             });

             $('#polyCenter').click(function(){ 
                creator[selectedPolygon].getPolyCenter();
             });

             //show color
             $('#showColor').click(function(){ 
                    $('#dataPanel').empty();
                    if(null==creator[selectedPolygon].showData()){
                        $('#dataPanel').append('Please first create a polygon');
                    }else{
                            $('#dataPanel').append(creator[selectedPolygon].showColor());
                    }
             });

            @foreach (var marker in Model)
            {
            <text>
                //alert("Latitude: @marker.Latitude, Longitude:@marker.Longitude");
                var point = new google.maps.LatLng(@marker.Latitude, @marker.Longitude);
                bounds.extend(point);

                var marker = new google.maps.Marker({
                        position: point,
                        map: googleMap,
                        //icon:'/Content/images/cloud_marker.png',
                        html: '@marker.InfoWindow'          
                    });
                google.maps.event.addListener(marker, "click", function () {
                        infoWindow.setContent(this.html);
                        infoWindow.open(googleMap, this);
                    });
                markers.push(marker); // For MarkerClusterer
            </text>
            }

            // For MarkerClusterer
            var zoom = 4;
            var size = -1; // This value represents how many markers will have the cluster inside (-1 is Default)
            var style = -1; // The style of the marker (globe, people, etc) (-1 is Default)
            zoom = zoom == -1 ? null : zoom;
            size = size == -1 ? null : size;
            style = style == "-1" ? null: parseInt(style, 10);
            markerClusterer = new MarkerClusterer(googleMap, markers, {maxZoom: zoom, gridSize: size, styles: styles[style]});
            // For MarkerClusterer

            //googleMap.fitBounds(bounds);

            $("a#controlbtn").click(function (e) {
            e.preventDefault();
            var slidepx = $("div#linkblock").width() + 10;
            if (!$("div#maincontent").is(':animated')) {
                if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {
                    $(this).removeClass('close').html('Hide your stuffs');
                    margin = "+=" + slidepx;
                } else {
                    $(this).addClass('close').html('Show your stuffs');
                    margin = "-=" + slidepx;

                }
                $("div#maincontent").animate({
                    marginLeft: margin
                }, {
                    duration: 'slow',
                    easing: 'easeOutQuint'
                });
            }41
        });
    });


</script>
<style type="text/css">
<!--

body {
    background-color: #EDEDED;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    margin: 0px;
    padding: 0px;
}

div#wrap {
    position: relative;
    width: 800px;
    overflow: hidden;
    margin: 100px auto 0px auto;
}

a#controlbtn{
    color: #333;
    text-decoration: none;
    display: inline-block;
    padding-left: 20px;
}

a#controlbtn.open {
    background: transparent url(../../slide-panel-jquery/images/toggle_minus.png) no-repeat left center;
}

a#controlbtn.close {
    background: transparent url(../../slide-panel-jquery/images/toggle_plus.png) no-repeat left center;
}

div#linkblock {
    float: left;
    width: 140px;
    margin-left: -150px;
    border-right: solid 1px #DDDDDD;
}

div#maincontent {
    position: relative;
    margin-left: 150px;
}

#yourlist {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#yourlist li {
    padding: 3px 5px 3px 0px;
    position: relative;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;

}

#yourlist li a {
    color: #D4432F;
    padding: none;
    margin: none;
}

h4 {
    margin: 0px;
    font-size: 16px;
    line-height: 26px;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    clear: none;
}
-->
</style>
<div id="wrap">
    <div id="control">
        <a id="controlbtn" class="open" href="http://aext.net" alt="Show/View your stuffs">Show
            Search</a>
    </div>
    <div id="maincontent">
        <div id="linkblock">
            <h4>
                All tags</h4>
            <ul id="searchItems">
                <li><a href="http://aext.net/category/css/" title="CSS & XHTML">Concept1</a></li>
                <li><a href="http://aext.net/category/php/" title="Resources">Concept2</a> </li>
                <li><a href="http://aext.net/category/resources/" title="Resources">Concept3</a></li>
                <li><a href="http://aext.net/category/resources/" title="Resources">Concept4</a></li>
                <li><a href="http://aext.net/category/theme-layout/" title="Themes & Layouts">Concept5</a> </li>
            </ul>
        </div>
        <div id="main-map" style="width: 800px; height: 500px;">
        </div>
        <div id="side">
            <input id="newPolygon" value="New" type="button" class="navi"/>
            <input id="polyCenter" value="Get center" type="button" class="navi"/>
            <input id="reset" value="Reset" type="button" class="navi" />
            <div id="dataPanel">
            </div>
        </div>
    </div>
</div>

Answer 1

This was already solved, but due to a refactor I really can’t tell what the exact problem was.