map_coordinates.tpl 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <div id="map" style="width:100%; height:400px;">
  2. </div>
  3. <script>
  4. $(document).ready(function() {
  5. initMap();
  6. });
  7. function addMaker(lat, lng, map, bounds, userInfo) {
  8. var location = new google.maps.LatLng(lat, lng);
  9. var infoWindow = new google.maps.InfoWindow();
  10. var geocoder = geocoder = new google.maps.Geocoder();
  11. var marker = new google.maps.Marker({
  12. map: map,
  13. position: location,
  14. label: userInfo.complete_name
  15. });
  16. var address = "";
  17. geocoder.geocode({ 'latLng': location }, function (results) {
  18. address = results[1].formatted_address;
  19. var infoWinContent = "<b>" + userInfo.complete_name + "</b> - " + address;
  20. marker.addListener('click', function() {
  21. infoWindow.setContent(infoWinContent);
  22. infoWindow.open(map, marker);
  23. });
  24. });
  25. bounds.extend(marker.position);
  26. map.fitBounds(bounds);
  27. }
  28. function initMap() {
  29. var center = new google.maps.LatLng(-3.480523, 7.866211);
  30. var bounds = new google.maps.LatLngBounds();
  31. var map = new google.maps.Map(document.getElementById("map"), {
  32. zoom: 2,
  33. center: center,
  34. mapTypeControl: true,
  35. mapTypeControlOptions: {
  36. style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  37. },
  38. navigationControl: true,
  39. mapTypeId: google.maps.MapTypeId.ROADMAP
  40. });
  41. {% for field in extra_field_values %}
  42. var latLng = '{{ field.value }}';
  43. latLng = latLng.split(',');
  44. var lat = latLng[0];
  45. var lng = latLng[1];
  46. {% set userInfo = field.itemId | user_info %}
  47. addMaker(lat, lng, map, bounds, {{ userInfo|json_encode }});
  48. {% endfor %}
  49. }
  50. </script>