3

jquery モバイルで Google マップを読み込めませんでした。読み込みますが、ブラウザで更新を押したときのみです。現在、jquery.mobile 1.3.1 と jquery 1.9.1 を使用しています。私はこれをすべて学んでいるので、これを行う方法がわかりません。

function initialize() {

        //add map, the type of map
        var map = new google.maps.Map(document.getElementById('outage_map'), {
            zoom: 9,
            center: new google.maps.LatLng(37.7749295, -122.4194155),
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var $map = $('#outage_map');
        $map.height( $(window).height(200) - $map.offset().top );

        //declare marker call it 'i'
        var marker, i;

        //declare infowindow
        var infowindow = new google.maps.InfoWindow({
            maxWidth: 250,
        });

        //add locations
        var locations = [
            ['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.789241, -122.41073, 'images/electric.png'],

            ['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.806992, -122.41051, 'images/electric.png'],

            ['San Francisco: Gas Interruption <br> Reported: 9:30am <br> Estimated Restore Time: 12:00am', 37.789241, -122.41073, 'images/gas.png'],

            ['San Francisco: Planned Maintenance <br> Time: 9:00am to 2:30pm ', 37.784748, -122.468982, 'images/maintenance.png'],

            ['Shingletown: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 40.4923784, -121.8891586, 'images/electric.png'],

            ['San Mateo: Maintenance <br> Time: 10:00am to 12:00pm', 37.5629917, -122.3255254, 'images/maintenance.png'],

            ['Concord: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.9779776, -122.0310733, 'images/electric.png'],

            ['Hayward: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.6688205, -122.0807964, 'images/electric.png'],

            ['Alameda: Maintenance <br> Time: 9:00am to 3:30pm', 37.7652065, -122.2416355, 'images/maintenance.png'],
        ];

        //add marker to each locations
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
            });

            //click function to marker, pops up infowindow
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

マップは「ページ」と呼ばれる別のコンテナ内にあります

<div class="page" data-role="page" id="map_main">
  <!-- navagation -->
  <div data-theme="a" data-role="header" data-position="fixed">
      <a data-role="button" data-direction="reverse" data-transition="slide"
      href="index copy.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
          Main
      </a>
      <h3>
          Outage Map
      </h3>
  </div>
  <!-- navagation -->

  <!-- Map -->
  <div class="map_image" id="outage_map"></div>    
  <!-- Map -->

4

1 に答える 1