By PHP Developer Alexey Zabaykin
How to list clients’ feedback in a way that shows that you have many clients and they are spread globally?
Thanks to the huge amount of feedbacks, our previous edition of References page turned to look like the Star Wars story-telling.
We decided that Google Maps will do the job. I should note that the site engine, developed by Sibers, was created using Sophit framework. This engine is very flexible and pretty simple for creating administrative solutions and fully separates HTML templates from PHP code. That’s why creation of PHP administrative part doesn’t cause any problems and webmasters enjoy a huge area for professional activities.
The next point was to research the necessary interactions with Google Maps. There is a lot of abilities provided by Google to change types of appearance and various features. So, to escape the mess, I investigated a bit in order to create the optimal solution. Thus, here is a list of crucial moments of creating our References page.
Backend
Simply put, we have to insert locations and link them with needed information. Administrator has two possibilities to manage the locations: automatically, through the function
geocoder.getLatLng()
– looks for the place by name only – and manually with function
GEvent.addListener(map, ‘click’, mapClick)
– sets latitude/longitude by a click on map; coordinates then are transferred into the form by
mapClick function.
Displaying
Ok, the administration form is done. Now, in order to display feedbacks on the map, we pass them to javascript in the cities array and Google Maps start to populate with our thankful customers. For further interactivity, let’s make the bubble images change when mouse hovers it.
GEvent.addListener(marker, “mouseover”, function() {
marker.setImage(pic_hand_up.src);
});
GEvent.addListener(marker, “mouseout”, function() {
marker.setImage(marker.getIcon().image);
});
And one more tweak, image preloading:
var pic_hand_up = new Image()
Now the little green person gladly greets us and does not disappear during first loading. The customer reference can be quite large, therefore its content dynamically loads by clicking on the icon:
_getFullReferences(city_id)
Also, references with phone numbers are displayed immediately below the map. When clicking on the address line, the map centers on this location via method map.setCenter()
Time to check it by yourself: https://www.sibers.com/portfolio/references/