views:

33

answers:

2

I don't know why this is.

But for some reason, my google maps script is loaded in the page, but it is not displayed.

I'm curious about what i'm doing wrong.

Here's my html.

<ul class="address">
<LI><STRONG>Titel:</STRONG><br/>Text
<div class="gmap" address="Stationsstraat 23 8780 Oostrozebeke"></div></LI>
</ul>
<ul class="address">
<LI><STRONG>Titel:</STRONG>Text
<div class="gmap" address="Eredekestraat 56 2000 Antwerpen"></div></LI></UL>

And here's my Javascript (with jQuery):

     $(document).ready(function(){
        var coll_gmap = $(".gmap");
        if ( coll_gmap.length != 0 )
        {
            //initiate map
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            //loop all addressen + insert into map
            coll_gmap.each(function(index)
            {
                map = new google.maps.Map(coll_gmap[0], myOptions);
                 if (geocoder) {
                        geocoder.geocode( { 'address': $(this).attr("address")}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                map.setCenter(results[0].geometry.location);
                                var marker = new google.maps.Marker({
                                    map: map, 
                                    position: results[0].geometry.location
                                });
                            } else {
                                alert("Geocode was not successful for the following reason: " + status);
                            }//end if status
                        }); //end if geocoder.geocode
                    } //end if geocoder   

            }) //end coll_gmap each

            }//end if coll_gmap length
    }); //end onload


    var geocoder, map;
+1  A: 

broken HTML. None of your divs are closed, and this is just totally wrong: </ </LI></UL>

no
Even though what you said was right (</div).That's not the reason why it's broken.
NicoJuicy
+1  A: 

I found out what it was.

I have to set my width and height on the

<div> =>(becomes)=>
<div style="width:500px;height:150px"></div> 

Simple to forget, i guess :(

NicoJuicy