0

機能を強化したいのinitialize()ですが、そのたびにコードが壊れてしまいます。私は最終的にこのようなことをしようとしています。ここでは、マップ上のマーカーに直接関連するものを含むサイドバーがあり、AJAX で...まず、他の機能を外部に配置できるようにしたいinitialize()関数 。これはうまくいきます：

<script>

  function initialize() {
    // create the map object
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };    
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
        mapOptions);

    // create your location marker
    var mylocOptions = {
      draggable: true,
      animation: google.maps.Animation.DROP,
      icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
            new google.maps.Size(22,22),
            new google.maps.Point(0,18),
            new google.maps.Point(11,11)),
      title: "You are here..."
    };
    var myloc = new google.maps.Marker(mylocOptions);

    // get location information from browser, or from user input, or from database
    <% if !signed_in? || !current_user.loc %>
      if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
        var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
        myloc.setPosition(me);
        myloc.setMap(map);
        map.setCenter(me);
        $.ajax({
          data: { me: me.toString() },
          type: 'POST',
          url: '/set-location'
        })
      }, function(error) {
          var address = prompt('Where are you looking?');
          geocoder = new google.maps.Geocoder();
          geocoder.geocode({ 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              var me = results[0].geometry.location
              myloc.setPosition(me);
              myloc.setMap(map);
              map.setCenter(me);
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            };
          });
      });
    <% else %>
      var me = new google.maps.LatLng(<%= current_user.loc %>);
      myloc.setPosition(me);
      myloc.setMap(map);
      map.setCenter(me);
      map.setZoom(12);
    <% end %>

    // watch for marker movement, and update location accordingly
    var oldPos = myloc.getPosition();
    google.maps.event.addListener(myloc, "dragend", function(e){
      revGeo = new google.maps.Geocoder();
      var newPos = myloc.getPosition();
      $.ajax({
        data: { me: newPos.toString() },
        type: 'GET',
        url: '/set-location'
      })
      if(oldPos != newPos)
        revGeo.geocode({'latLng': newPos}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              $('#loc').html(results[1].formatted_address);
            }
          } else {
            alert("Geocoder failed due to: " + status);
          }
        });
      oldPos = newPos;
    });

    // when creating an event, check for event location,
    // verify it's existance and put a marker down on the map
    $(document).on('focusout', '#event_location', function() {
      geocoder = new google.maps.Geocoder();
      address = document.getElementById("event_location").value;
      geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var coords = results[0].geometry.location;
          map.setCenter(coords);
          var marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: coords
          });
          $('#coords').html('coordinates: ' + coords)
          $('#event_geocode').val(coords.toString())
        } else {
          alert(status + " for " + address);
        };
      });
    });
  }
</script>

……でも、きっと壊れますよね。実際、私がやりたいことを始めるには、それを解体しなければならないことを知っています。私が間違っていることのアイデアはありますか？

4

1 に答える 1

2

var マップをグローバル変数にします (関数の外で宣言します)。

// Global
var map;

その後...

function initialize() {
    // create the map object
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  // Do not use the var keyword inside the function.    
    map = new google.maps.Map(document.getElementById("map_canvas"), 
        mapOptions);

// etc..
于 2013-02-24T07:48:54.070 に答える