RateIt Symfony2 and Google Maps

Nov 6, 2012 at 9:21 AM

Hello !


This plugin is really great ! I've just discovered it and i'm trying to add it in my website.

I have two questions.

First when i create a form type with RateIt in Symfony2, it works great but the change of stars when hovering is slow, have you an idea why (It's not slow outside the type Symfony2) ?

Secondly, i want to insert a RateIt readonly in a InfoWindow of a Google Map,(API v3) but it doesn't appear. Should i do differently than in a normal page ?





Nov 6, 2012 at 10:37 AM

If you could show me a sample page(s), where you show both problems, I might give a good answer.

Nov 6, 2012 at 12:55 PM


I can't give you that, but i can give you my code.


Here is my code for the Google Maps InfoWindow :

<div id="gmap-div" style="width: 400px; height: 300px; margin-bottom: 20px;"></div> 
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
            var geocoder;
            var map;
            function codeAddress(address) {
                // Geocodage de l'adresse
                geocoder = new google.maps.Geocoder();
                geocoder.geocode( { 'address': address}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {                 
                    // Cr�ation carte centr�e sur adresse
                    map = new google.maps.Map(document.getElementById('gmap-div'), {
                      zoom: 17,                                 // zoom de d�part
                      center: results[0].geometry.location,     // centre de la map
                      mapTypeId: google.maps.MapTypeId.ROADMAP, // type de map
                      streetViewControl: false,                 // d�sactiver contr�le StreetView
                      panControl: false                         // masquer contr�les de d�placement
                    // Cr�ation du marker
                    var markerRouge = new google.maps.MarkerImage("{{ asset('img/marker_rouge.png') }}");                    
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        icon : markerRouge
                    // Cr�ation info-bulle
                    var contenuInfoBulle = '<h4>{{ etab.nom }}</h4>' +	
                        '<div class="rateit" data-rateit-value="{{ etab.noteMoyenne }}" data-rateit-ispreset="true" data-rateit-readonly="true" title="{{ etab.noteMoyenne }}"></div>';
                    var infoBulle = new google.maps.InfoWindow({
                            content: contenuInfoBulle
                    google.maps.event.addListener(marker, 'click', function() {
                            infoBulle.open(map, marker);
                  } else {
                    alert("Geocode was not successful for the following reason: " + status);

            $(function() {
              codeAddress("{{ etab.adresse }}");


And here is my code for the Symfony2 type :


// NotationType.php

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormViewInterface;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;

class NotationType extends AbstractType
    public function setDefaultOptions(OptionsResolverInterface $resolver)
            'max' => 5

    public function getParent()
        return 'integer';

    public function getName()
        return 'notation';

{# fields.html.twig #}
{% block notation_widget %}
    {% spaceless %}
        {{ block('hidden_widget') }}
        <div  id="notation_{{id}}" class="rateit" data-rateit-resetable="false" {% if value is not empty %}data-rateit-value="{{ value }}" data-rateit-ispreset="true"{% endif %} {#data-rateit-max="{{ max }}"#} data-rateit-backingfld="#{{ id }}"></div>        
    {% endspaceless %}
{% endblock %}



Nov 7, 2012 at 8:49 AM

The Google Maps thing is quit easy to fix. After you add the rateit div to the dom, you will have to call $('.rateit').rateit() to initialize it.

The other issue is harder. I cannot really give you an answer without seeing the actual page in order to check it.

Nov 9, 2012 at 1:47 PM

Thanks for your awser,


I add $('.rateit').rateit() ti my code but i have an error "TypeError: jQuery(".rateit").rateit is not a function". What am i missing ?


google.maps.event.addListener(marker, 'click', function() {
    infoBulle.open(map, marker);   

Nov 11, 2012 at 2:43 PM

It seems like somewhere you didn't add rateit.min.js .

Sep 2, 2014 at 6:43 PM
Did you manage to get the Google Maps code working? I'm having exactly the same issue :(
I have the css & js loaded. Confirmed by the develop dashboard.
I'm using your approach above with the jquery in the google maps listener.
But no stars appear for me! :(
Sep 2, 2014 at 6:50 PM
Oh i'm such a wally. I had the $('.rateit').rateit(); in front of the marker open command. Stupid me.
All working beautifully now :)