ここでは、最初の「基本的な地図の例」に焦点を当てて、jQuery モバイル Google マップの例を使用しています。
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html
にマーカーを動的に追加できるようにしたいのですbasic_map
が、問題が発生しています。jQuery モバイルと JavaScript は初めてです。
これは、jQuery モバイル UI Web サイトの基本マップの例を編集したものです。jQuery モバイルdemos
フォルダーに保存すると、すべてが適切にレンダリングされます。地図ページの下部にボタンとaddMarkers
機能を追加しました。ページを読み込むと、シカゴに近いmobileDemo
座標を中心に地図が表示されますが、そこにはありません。(-41, 87)
ボタンをクリックすると、そのchicago
時点で別のマーカーでマップを更新したいのですが、画面が空白になります。
これは、私が本当にやりたいことの単なる例です。私の長くて複雑なプログラムでは、データベースにクエリを実行して、クエリに一致する住所を見つけ、それらのマーカーを動的にマップに配置したいと考えています。シカゴ ポイント (またはその場で他のマーカー) をプロットできるようにするには、このソース コードについて何を変更する必要がありますか?
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" />
<link type="text/css" rel="stylesheet" href="css/mobile.css" />
<script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '41,-87', 'zoom': 7 };
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var map
function addMarkers(){
map = new google.maps.Map(document.getElementById('map_canvas'));
var marker = new google.maps.Marker({
map: map,
position: chicago
});
}
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
</script>
</head>
<body>
<div id="basic_map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
<div data-role="content">
<a href="#" data-role="button" data-theme="b" onclick="addMarkers()">Add Some More Markers</a>
</div>
</div>
</body>
</html>