JavaScript and HTML snippets for Gmaps4Rails issue #83

gmaps4rails-issue-83-snippets

// from head wrapped in script tag

Gmaps.still_image_extended_content_values_location_map_div = new Gmaps4RailsGoogle();

function load_still_image_extended_content_values_location_map_div() {
Gmaps.still_image_extended_content_values_location_map_div.map_options.center_latitude = -41.1796666666667;
Gmaps.still_image_extended_content_values_location_map_div.map_options.disableDoubleClickZoom = true;
Gmaps.still_image_extended_content_values_location_map_div.map_options.draggable = true;
Gmaps.still_image_extended_content_values_location_map_div.map_options.center_longitude = 174.958833333333;
Gmaps.still_image_extended_content_values_location_map_div.map_options.container_id = 'map_container_still_image_extended_content_values_location_map_div';
Gmaps.still_image_extended_content_values_location_map_div.map_options.id = 'still_image_extended_content_values_location_map_div';
Gmaps.still_image_extended_content_values_location_map_div.map_options.libraries = 'places';
Gmaps.still_image_extended_content_values_location_map_div.map_options.auto_adjust = false;
Gmaps.still_image_extended_content_values_location_map_div.map_options.zoom = 5;
Gmaps.still_image_extended_content_values_location_map_div.initialize();
Gmaps.still_image_extended_content_values_location_map_div.markers = [{"lat":-41.1796666666667,"lng":174.958833333333}];
Gmaps.still_image_extended_content_values_location_map_div.markers_conf.draggable = true;
Gmaps.still_image_extended_content_values_location_map_div.create_markers();
Gmaps.still_image_extended_content_values_location_map_div.adjustMapToBounds();
Gmaps.still_image_extended_content_values_location_map_div.callback();
};

// i call this directly to support variable number of maps on page (long story)
window.onload = Gmaps.loadMaps;

// end from head

// relevant HTML

 <label for="still_image_extended_content_values_location">Location</label>

  <div style="float: left">
    
    <div id="still_image_extended_content_values_location_map_div_fields">
     <label class="inline" for="still_image_extended_content_values_location_map_coords_value">Latitude and Longitude coordinates:</label>
     <input id="still_image_extended_content_values_location_map_coords_value" name="no_map[coords]" type="text" value="-41.1796666666667,174.958833333333" /><br />

     <label class="inline" for="still_image_extended_content_values_location_map_zoom_value">Zoom level for map:</label>
     <input id="still_image_extended_content_values_location_map_zoom_value" name="no_map[zoom_lvl]" size="2" type="text" value="5" /></div>

     <div id="still_image_extended_content_values_location_map_div_warning">This feature requires exact data to function properly.</div>

     <label id="still_image_extended_content_values_location_map_div_search_label">Search for location</label
     <input id="still_image_extended_content_values_location_map_div_search" name="Search for location" size="60" style="padding: 0; margin: 0;" type="text" value="" />
	
     <div class="extended_field_form_map" id="map_container_still_image_extended_content_values_location_map_div"> 
  
     <div id="still_image_extended_content_values_location_map_div" class="extended_field_form_map"><small>javascript needs to be on to use Google Maps</small></div>

// from below map, loaded in body based on helpers that are localized at time of page load (and therefore hard to have in separate lib file)

<script type="text/javascript">
//<![CDATA[
function addDragendListenerForMarkersOf(gmaps4RailsMap) {
         var markers_to_monitor = gmaps4RailsMap.markers;

         for (var i = 0; i <  markers_to_monitor.length; ++i) {
           google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', function(event) {
               updateMapData(gmaps4RailsMap, event.latLng);
           });
         }
       }

       function updateMapData(gmaps4RailsMap, latlng_obj) {
            var infoWindowText = '',
              latValue = latlng_obj.lat(),
              lngValue = latlng_obj.lng();

            // Attempt to get the address. When it succeeds, it'll reposition the marker to the location
            // the address corresponds to, and update the text/fields as well (to keep data current)
            var geocoder = new google.maps.Geocoder();

            geocoder.geocode({ latLng: latlng_obj }, function(results, status) {
              if (status != google.maps.GeocoderStatus.OK) {
                // if something went wrong, give the status code. This should rarely happen.
                if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
                  infoWindowText = 'Error: Something has happened.<br />Google Maps cannot determine the location where you placed the marker.<br />Try repositioning it nearer to a road.';
                } else {
                  infoWindowText = 'Error: Something has happened. Please try again.';
                }
                infoWindowText = infoWindowText + ' (' + status + ')';
              } else {
                // get the place
                // TODO: provide options in the infobox for choosing accuracy
                // by cycling through results array, higher index equals less accurate
                var place = results[0];

                // create the text used in a bubble soon
                infoWindowText = '<b>Address:</b>' + place.formatted_address;

                // Form a a string like   -45.861836,127.398373  (which is the format we use)
                $(gmaps4RailsMap.latlng_text_field).value = latValue + ',' + lngValue;
                // the current maps zoom level

                if (gmaps4RailsMap.map_fields_type == 'map_address') {
                  // the address details from the result
                  $(gmaps4RailsMap.address_text_field).value = place.formatted_address;
                }
              }
            });

            // TODO: fix infoWindowText
            var newMarkers = [{"lng":latValue,"description": infoWindowText, "lat":lngValue, "draggabel": true}]

            gmaps4RailsMap.replaceMarkers(newMarkers);

            // add dragend listener on marker by refreshing maps listeners on its markers
            addDragendListenerForMarkersOf(gmaps4RailsMap);
          } $('still_image_extended_content_values_location_map_div_warning').hide();
       $('still_image_extended_content_values_location_map_div_fields').hide(); Gmaps.still_image_extended_content_values_location_map_div.callback = function() { $('still_image_extended_content_values_location_map_div').setStyle({height: '380px'}); Gmaps.still_image_extended_content_values_location_map_div.latlng_text_field = 'still_image_extended_content_values_location_map_coords_value';
       Gmaps.still_image_extended_content_values_location_map_div.zoom_text_field = 'still_image_extended_content_values_location_map_zoom_value';
       Gmaps.still_image_extended_content_values_location_map_div.address_text_field = 'still_image_extended_content_values_location_map_address';
       Gmaps.still_image_extended_content_values_location_map_div.map_fields_type = 'map';
        $('still_image_extended_content_values_location_map_coords_value').readonly = true;$('still_image_extended_content_values_location_map_zoom_value').readonly = true; // when a user clicks the map, add a marker and update the coords and zoom level
       google.maps.event.addListener(Gmaps.still_image_extended_content_values_location_map_div.map, 'click', function(event) {
           updateMapData(Gmaps.still_image_extended_content_values_location_map_div, event.latLng);
        }); // when a user drags a marker on the map, clear other markers, and update based on this one
       addDragendListenerForMarkersOf(Gmaps.still_image_extended_content_values_location_map_div);
        // when a user stops dragging/zooming, update the zoom level (not the coords, thats what the pinpoint is for)
       google.maps.event.addListener(Gmaps.still_image_extended_content_values_location_map_div.map, 'zoom_changed', function() {
         $('still_image_extended_content_values_location_map_zoom_value').value = Gmaps.still_image_extended_content_values_location_map_div.map.getZoom();
       });  }
//]]>
</script>

Indeed I think you have a closure problem.
I guess you should replace:

      google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', function(event) {
           updateMapData(gmaps4RailsMap, event.latLng);
       });

With:

       google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', ( function(map) {
           return function(event) { updateMapData(map, event.latLng); }
       } )(gmaps4RailsMap)
       );

Hi Ben, That looks to have done it. Thanks! I do have another problem though. createInfoWindow appears to fail with the following: TypeError: 'undefined' is not an object (evaluating 'a.__e3_') 7Bmain,geometry,places%7D.js:19 createInfoWindow being triggered by the call to replaceMarkers. The marker does act like a link on hovering, but nothing pops up when you click on it. Nor do I get a new error in the console on click. I.e. it looks to me that the "addListener" is failing at the time of declaration. Any ideas? Best, Walter

…

On Sep 9, 2011, at 1:54 AM, Benjamin Roth wrote: // Indeed I think you have a closure problem //I guess you should replace ``` google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', function(event) { updateMapData(gmaps4RailsMap, event.latLng); }); ``` //With: ``` google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', ( function(map) { return function(event) { updateMapData(map, event.latLng); } } )(gmaps4RailsMap) ); ``` ## Reply to this email directly or view it on GitHub: https://gist.github.com/1202775

Hi again, I made some changes and the TypeError seems to have gone away. Still getting an issue with infowindow in some cases, but I bet I can track it down (difference between Places library place response and Geocoder library place response, I'm betting). Best, Walter

…

On Sep 9, 2011, at 10:55 AM, Walter McGinnis wrote: Hi Ben, That looks to have done it. Thanks! I do have another problem though. createInfoWindow appears to fail with the following: TypeError: 'undefined' is not an object (evaluating 'a.__e3_') 7Bmain,geometry,places%7D.js:19 createInfoWindow being triggered by the call to replaceMarkers. The marker does act like a link on hovering, but nothing pops up when you click on it. Nor do I get a new error in the console on click. I.e. it looks to me that the "addListener" is failing at the time of declaration. Any ideas? Best, Walter On Sep 9, 2011, at 1:54 AM, Benjamin Roth wrote: > // Indeed I think you have a closure problem > //I guess you should replace > > ``` > google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', function(event) { > updateMapData(gmaps4RailsMap, event.latLng); > }); > ``` > > //With: > > ``` > google.maps.event.addListener(markers_to_monitor[i].serviceObject, 'dragend', ( function(map) { > return function(event) { updateMapData(map, event.latLng); } > } )(gmaps4RailsMap) > ); > ``` > ## > > Reply to this email directly or view it on GitHub: > https://gist.github.com/1202775

Ok let me know if the gem's code seems to bug :)