I’m experiencing a problem while trying to use google maps api v3 (with marker

Question

0

Asked: May 27, 20262026-05-27T19:56:40+00:00 2026-05-27T19:56:40+00:00

I’m experiencing a problem while trying to use google maps api v3 (with marker

0

I’m experiencing a problem while trying to use google maps api v3 (with marker clusterer) on my website. This is the output i’m having at this point:

http://imageshack.us/photo/my-images/710/mapproblem.png/

EDITED: first time i’m using pictures in post, and i can’t seem to be able to post it directly, so i posted the link instead. sorry about that.

as you can see, there’s no alignment at all

This is the significant part of the code:

show_map.js

function showMap(json_items) {

        var geocoder = new google.maps.Geocoder();
        var latlng;
        geocoder.geocode({'address':json_items[0]}, function(results,status){
            latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        });

        var markers = []
        var markoptions = {
            maxZoom : 10,
            gridSize : 50
        }
        var bounded = new google.maps.LatLngBounds();

        var options = {
            'mapTypeId': google.maps.MapTypeId.ROADMAP,
            'center': latlng
        };

        var map = new google.maps.Map(document.getElementById("big_map"), options);
        if(document.getElementById("big_map")){

            for (var i=1; i<10; i++ ){
                geocoder.geocode({'address': json_items[i]}, function(results, status){
                    var marker = new google.maps.Marker({position: results[0].geometry.location, map:map});
                    markers.push(marker);

                });
                bounded.extend(results[0].geometry.location);
                map.fitBounds(bounded);

            }

            var markerCluster = new MarkerClusterer(map, markers, markoptions);
            //map.fitBounds(markerCluster.getExtendedBounds(bounded));
        }
}

main.css

/*Big google map*/
#big-map {
    border: solid 1px #afafaf;
    background: #fff;
    margin-bottom: 15px;
    display: none;
}

#big-map .title {
    border-bottom: solid 1px #afafaf;
    background: #ebebeb;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 0 10px;
}

#big-map #big_map {
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 3;
        width: 948px;
        height: 280px;
}

and finally the template:

 <div class="grid_24">
      <div id="big-map">
          <h2 class="title">Map</h2>
          <div id="big_map"></div> <!-- this is where the actual map should spanw -->
          <a class="link" href="#">Reduce map</a>
      </div>
      <div class="clear"></div>     
 </div>
 <div class="clear"></div>

i really don’t know where i’m supposed to check for errors/wrong styles and stuff. following the reference page and the tutorials, i seem to be doing everything correctly (i’m not sure about the eventual clash between markerclusterer and latlngbounds, tho)

thanks all in advance!