Salut à tous,

Je galère un peu dans la programmation en adaptant un code déjà fait en code symfony et je sollicite vraiment votre aide car je suis bloqué. J'ai testé le plugin api v3 google map conçu pour le jquery si je ne me trompe pas qui me permet d'obtenir l'adresse et les coordonnées géographiques et ça marche (https://code.google.com/p/jquery-ui-map/wiki/jquery_ui_map_v_3_sample_code). J'ai placé le code en chargeant les scripts qu'il faut dans ma vue twig avec le template bootstrap, et op la carte ne s'affiche pas.

Voici la vue

{% extends "BlogBundle::layout_Blog.html.twig" %}
 
 
{% block meta %}
    code
{% endblock %}
 
 
{% block title %}
  Contact - {{ parent() }}
{% endblock %}
 
 
{% block body %}
    {% block header %}
      {% end block %}                
         
    {% block Section %}
        <section id="contact-page" class="container">
                <br/><br/>              
                    <!-- ------------------------------------------- -->
        <div class="row fdefault">
                    <div class="col-md-9 center  hidden-xs hidden-sm">
                        <img class="img-responsive" src="{{ asset('images/flashpub.png') }}" alt="">
                    </div>
                    <div class="col-md-9 center  hidden-md hidden-lg">
                        <img class="img-responsive" src="{{ asset('images/flashpub_sm.png') }}" alt="">
                    </div>
                    <div class="col-md-3">
                        <h3>Blogs</h3>
                        <p>Publicités récentes</p>
                        <!--<div class="btn-group">
                            <a class="btn btn-danger" href="#scroller2" data-slide="prev"><i class="icon-angle-left"></i></a>
                            <a class="btn btn-danger" href="#scroller2" data-slide="next"><i class="icon-angle-right"></i></a>
                        </div>
                        <p class="gap"></p>-->
                    </div>
                        
        </div><!--/.row-->
        <div class="row">
        
 
Code de géolocalisation
 
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
                                <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                                <!--<script src="{{ asset('js/uimap/jquery.ui.map.full.min.js') }}"></script>
                                <script src="{{ asset('js/uimap/jquery.ui.map.services.min.js')}} "></script>-->
                                <script src="{{ asset('js/jquery.uimap.js') }} "></script>
                                <script src="{{ asset('js/jquery.uimapservices.js') }}"></script>
 
 
    <script type="text/javascript">
            $(function() {
                // Also works with: var yourStartLatLng = '59.3426606750, 18.0736160278';
               // var yourStartLatLng = new google.maps.LatLng({{ blog_user.geoloc.latitude}},  {{ blog_user.geoloc.longitude}});
                var yourStartLatLng = new google.maps.LatLng(14.82268105,  -15.05676270);
                $('#map_canvas').gmap({'center': yourStartLatLng});
                
 
                
                
                $('#map_canvas').gmap().bind('init', function(event, map) {
                    $('#map_canvas').gmap('addMarker', { id:'m_1',
                                                        'position': '14.82268105,  -15.05676270',
                                                        'draggable': true,
                                                        'bounds': false
                                                        }, function(map, marker) {
                                                                    findLocation(marker.getPosition(), marker);
                                                                }).dragend( function(event) {
                                                                    loc = event.latLng;
                                                                    $( '#lat' ).val(loc);
                                                                    findLocation(event.latLng, this);
                                                                }).click( function() {
                                                                   
                                                                });
    $(map).click( function(event) {
        $('#map_canvas').gmap('clear', 'markers');
        
        $('#map_canvas').gmap('addMarker', {
            'position': event.latLng,
            'draggable': true,
            'bounds': false
        }, function(map, marker) {
 
            findLocation(marker.getPosition(), marker);
        }).dragend( function(event) {
            findLocation(event.latLng, this);
        }).click( function() {
            findLocation(marker.getPosition(), marker);
     
        })
    });
});
 
function findLocation(location, marker) {
    $('#map_canvas').gmap('search', {'location': location}, function(results, status) {
        if ( status === 'OK' ) {
            $.each(results[0].address_components, function(i,v) {
                if ( v.types[0] == "administrative_area_level_1" ||
                     v.types[0] == "administrative_area_level_2" ) {
               
                    $( '#region' ).val(v.long_name);
                } else if ( v.types[0] == "country") {
               
                    $( '#pays' ).val(v.long_name);
                }
            });
            marker.setTitle(results[0].formatted_address);
           
            $( '#adresse' ).val(results[0].formatted_address);
         
        }
    });
}

        });
 
    </script>
  <div id="dialog"></div>
  <center>
  
  <input type="text" id="pays" value="{{ blog_user.geoloc.pays}}"/>
  <input type="text" id="region" value="{{ blog_user.geoloc.region}}"/>
  <input type="text" id="adresse" value="{{ blog_user.geoloc.quartier}}"/>
  <input type="text" id="lat" value="{{ blog_user.geoloc.latitude}}"/>
  <input type="text" id="lng" value="{{ blog_user.geoloc.longitude}}"/>
  
  </center>
    
    
</div>
                    <!-- ------------------------------------------- -->      
                <br/><br/>
                <div class="row">
                    <div class="col-md-12 center">
               
                    </div>
                    <div class="col-md-12 center">
                        <div id="map_canvas2" style="width:500px; height:500px"></div>
                    </div>
                        
                 </div><!--/.row-->
                
                
                    
                            
                <br/><br/>  
                
                    
    </section><!--/#contact-page-->
    {% endblock %}
{% endblock %}

Merci de votre soutien

-
Edité par toufikktadlawi 9 novembre 2014 à 16:33:49

Une petite précision le chargement des scripts javascript:

 <!--<script src="{{ asset('js/uimap/jquery.ui.map.full.min.js') }}"></script>

-
Edité par toufikktadlawi 9 novembre 2014 à 16:30:16

Je mentionne aussi que les scripts que j'ai commentés donne exactement le même résultat.

merci

-
Edité par toufikktadlawi 9 novembre 2014 à 16:32:12

Bonjour,

J'ai finalement réglé le soucis en chargeant les scripts dans le bloc twig javascripts ({% block javascripts %}).

Sujet résolu