google apiの使用方法

質問

jQueryとgoogleマップのapiを同時に使用する方法を教えていただきたいと思います。

両方を使用するとカスタマイズしたgoogleマップは表示されますが、jQueryに不具合が起きます。

同時に使用する方法はないでしょうか。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script>

他に必要なことがあれば提示しますのでよろしくお願いします。

回答No.1

Taiyonoshizuku

不具合って何が起きてるの？

うちの環境でばっちし両方使ってるけど、別に何も問題は起きてないよ？

自分の仕様に当てはまらない＝不具合というのであれば、
その内容を質問に含めるべき。

お礼

回答ありがとうございます。

下記、不具合が起きているjQueryまとめました。
※印が不具合の内容です。

1) 追尾式ナビゲーション
※追尾しない。スクロールして更新ボタンを押すとスクロールした場所にナビゲーションが表示

var ua = navigator.userAgent;
if (ua.indexOf('iPhone') != -1 || ua.indexOf('iPad') != -1 || ua.indexOf('iPod') != -1 || ua.indexOf('Android') != -1) {
//iPhone、iPad、iPod、Androidの場合何もしない。
}
else{
//それ以外の場合はnavをトップ固定。
$(function() {
var nav = $('#gnav');
var navTop = nav.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
nav.css({
'position': 'fixed',
'top':'0',
'z-index': '1000',
'width': '100%',
});
} else if (winTop <= navTop) {
nav.css({
'position': 'static',
'top': '',
'background': ''
});
}
});
});
}

2) ページのtopに戻る
※スクロールしたらボタンが表示されるのですが、更に20px程進むと消えます

$(function() {
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});

3) ページ内リンクのスムーズスクロールやマウスオーバーでキャプションを表示してくれるjQueryのプラグインは動作しています。

上記であげた内容は
<script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script>
こちらを消すと全て作動します。

- jQueryは全てのバージョンを試しました。

4) googlemapは下記になります。

var gmg = new google.maps.Geocoder(),
map, center, mk ;
gmg.geocode({
'address': 'ここに地図の住所が入ります。'//表示したい場所
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {//ジオコードが成功したかどうかチェック
center = results[0].geometry.location;
initialize();
mk = new google.maps.Marker({//ここからマーカーの設定
map: map, position: results[0].geometry.location,
icon: {//マーカー画像のパスを設定
url: '/images/hoge.png',
anchor: {//マーカーを表示させる場所を設定
x: 55,
y: 90
}},
title: 'bounty'//マーカー画像のtitle
});
}
});

function initialize() {//初期化
var options = {
center: center,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
},
styles: [{
stylers: [{//色合いを設定
hue: "#244fae"},//カラーコード
{ gamma: 1.50},//ガンマ値
{ saturation: 0}]}]//彩度
};
map = new google.maps.Map($("#gm").get(0), options);//セレクタ内に地図取得
}

長くなりましたが、不明な点があればまたご連絡ください。

よろしくお願いします。

補足

やっぱり分からないですよね？
ありがとうございました。