Удивительный ответ Лулалала - спасибо за решение моей проблемы.Я изменил код HTML (class = "gmap_canvas" вместо id = "gmap_canvas") в соответствии с его ответом.Кроме того, я добавил
google.maps.event.trigger (map, "resize");
, чтобы правильно отобразить карту.
Подробнее см. Также функцию showMap.
В html я изменил тег div для карты на:
<div data-role="content">
<div id="container" class="container">
<div class="gmap_canvas"></div>
</div>
</div><!-- div content -->
и добавил rel = "external"- Атрибут для всех тегов привязки:
<div data-role="navbar" data-theme="b">
<ul>
<li><a id="karteLink" href="index.html" data-icon="karte" data-transition="fade" rel="external">KARTE</a></li>
<li><a id="listeLink" href="liste.html" data-icon="liste" data-transition="fade" rel="external">LISTE</a></li>
<li><a id="optionsLink" href="favoriten.html" data-icon="options" data-transition="fade" rel="external">OPTIONEN</a></li>
</ul>
</div><!-- /navbar -->
Мой код (jquery)
var activePage;
$( '#karte' ).live( 'pageinit',function(event){
activePage = $(event.target);
initialize();
});
function initialize() {
// prepare Geocoder
clearOverlays();
var geocoder = new google.maps.Geocoder();
navigator.geolocation.getCurrentPosition(function(position) {
var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var myOptions = { // default map options
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
showMap(myOptions);
google.maps.event.trigger(map, "resize");
findPlaces();
});
}
function showMap( options ) {
canvas = $('.gmap_canvas', activePage);
canvas.css({width: '100%', height: '100%', position: 'relative'});
map = new google.maps.Map(canvas[0], options);
myLatLng = options.center;
}
// clear overlays function
function clearOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers = [];
infos = [];
}
}
// clear infos function
function clearInfos() {
if (infos) {
for (i in infos) {
if (infos[i].getMap()) {
infos[i].close();
}
}
}
}
// find custom places function
function findPlaces() {
var cur_location = myLatLng;
// prepare request to Places
var request = {
location: cur_location,
radius: radius,
type: [type],
keyword: [keyword]
};
// send request
service = new google.maps.places.PlacesService(map);
service.search(request, createMarkers);
}
// create markers (from 'findPlaces' function)
function createMarkers(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
// if we have found something - clear map (overlays)
//Eigene Winzer von der Datenbannk holen
$.getJSON(urlInit, function(data){
$.each(data.winzer, function(restaurant, daten){
var locationObject = new Object;
locationObject.name = daten.name;
locationObject.geometry = new Object;
locationObject.geometry.location = new google.maps.LatLng(daten.latitude,daten.longitude);
locationObject.vicinity = daten.ort;
createMark(locationObject);
});
});
// and create new markers by search result
for (var i = 0; i < results.length; i++) {
createMark(results[i]);
}
} else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
alert('Sorry, nothing is found');
}
}
// creare single marker function
function createMark(obj) {
// prepare new Marker object
var mark = new google.maps.Marker({
position: obj.geometry.location,
map: map,
title: obj.name,
animation: google.maps.Animation.DROP
});
markers.push(mark);
// prepare info window
var infowindow = new google.maps.InfoWindow({
content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name +
'<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
});
// add event handler to current marker
google.maps.event.addListener(mark, 'click', function() {
clearInfos();
infowindow.open(map,mark);
});
infos.push(infowindow);
}