Question

I’d like to use jQuery with Google maps. I’m trying to replicate this example. Below is given the code that I’m using. The problem is that the map does not appear on my web-page. It’s just blank. What’s the case?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.map.js"></script>

    <div id="fragment-4">
    <script>
    $(document).ready(function(){
        $('#map_canvas').gmap().bind('init', function(evt, map) {
            $('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
                var clone = $(item).clone().addClass('ui-dialog-vevent');
                clone.append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
                var lat = result.location[0].geo[0].latitude['value-title']; 
                var lng = result.location[0].geo[0].longitude['value-title'];
                $('#map_canvas').gmap('addMarker', { 
                        'bounds':true, 
                        'position': new google.maps.LatLng(lat, lng), 
                        'title': result.summary,  
                    }, 
                function(map, marker) {
                    $(item).find('.summary').click( function() {
                        $(marker).triggerEvent('click');
                        return false;
                    }); 
                }).click(function() {
                    map.panTo( $(this).get(0).getPosition());
                    $(clone).dialog({ 
                        'modal': true, 
                        'width': 530, 
                        'title': result.summary, 
                        'resizable': false, 
                        'draggable': false 
                    });
                    $('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), { 
                        'position': $(this).get(0).getPosition() 
                    });
                });
            });
        });
    });
        </script>
                <div id="map_canvas">

    </div>
    </div>

Answer 1

Use pure JavaScript for this.
JQUERY is not the best choice in this case.
I have developed a huge API to overlay vector blueprints over Google Maps and I can tell you that even though it might be a bit more to type it is way better to just use JavaScript.
Do not over complicate things and as M1ke said always keep your console open when working with JavaScript.