jQuery Mobile 1.0.1 Google Maps не показывает карту в первый раз после того, как работает Обновить Обновить - PullRequest
Новая
       39

jQuery Mobile 1.0.1 Google Maps не показывает карту в первый раз после того, как работает Обновить Обновить

2 голосов
/ 27 марта 2012

Моя проблема - каждый раз, когда я открываю сайт; в первый раз карта не отображается, после перезагрузки / ссылки она работает и показывает карту.

Вот мой код Google Maps: 

<script type="text/javascript">
  var map;
  var infowindow;

  function initialize(position) {
    //var pyrmont = new google.maps.LatLng(48.195201,16.369547);
    var pyrmont = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });
    var a = new google.maps.Marker({position: pyrmont,map: map,icon:'catal.png'});
    var request = {
      location: pyrmont,
      radius: 500,
      types: ['restaurant']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
    if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS){
   alert('zero results near this location');
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(    place.name
                                +'<br/>'+place.vicinity);
      infowindow.open(map, this);
    });
  }

  google.maps.event.addDomListener(window, 'load', function(){
      navigator.geolocation.getCurrentPosition(initialize);
  });
</script>

А вот как я использую его с jquery: 

<div data-role="page" id="restaurant">
    <div data-role="header">
        <a href="index.html" data-icon="arrow-l">Back</a>
        <h1>Restaurants</h1>    
    </div> 

    <div data-role="content">
        <div id="map" style="width:400px; height:400px;"></div>
    </div> 
</div>

1 Ответ

3 голосов
/ 27 марта 2012

Вы ожидаете события window.load, которое сработает только при полном обновлении страницы. Вот код нарушения: 

google.maps.event.addDomListener(window, 'load', function(){
    navigator.geolocation.getCurrentPosition(initialize);
});

Вы можете использовать jQuery для привязки к событию pageinit для вашей страницы #restautant: 

$(document).delegate('#restaurant', 'pageinit', function () {
    navigator.geolocation.getCurrentPosition(initialize);
});

Это вызовет функцию initialize() при инициализации псевдостраницы #restaurant (что происходит один раз при каждом добавлении в DOM).

Вот документация для события pageinit (а также всех других событий jQuery Mobile): http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

...