以前、Web サービスから JSON 形式でダウンロードされたマーカーを表示する JavaScript を用意しました。
コードは次のとおりです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MAP</title>
<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="map_bar.js"></script>
</head>
<body>
<h1>MAPPA</h1>
<div id="map"></div>
</body>
</html>
これは map_bar.js を呼び出します:
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(80.650535,41.886146),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating a global infoWindow object that will be reused by all markers
function createPoints(json){
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.locations.length; i < length; i++) {
var data = json.locations[i],
latLng = new google.maps.LatLng(data.lat, data.long);
console.log(data.long);
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.nombre,
icon: 'beer.png'
});
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function() {
info = data.nombre+'<br/>'+data.offerta+'<br/>'+data.horario;
infoWindow.setContent(info); //esto escibe las info
infoWindow.open(map, marker);
});
})
(marker, data);
}
}
// Get the JSON data from PHP script
var json ;
$.getJSON("http://mywebservice.php").done(function(data) {
console.log(data);
json = data;
createPoints(json);
});
}
})();
動作しますが、既存の Web ページに統合しようとすると問題が発生します。いくつかのセクションがあり、同じコードを「マップ セクション」に配置すると、マップは表示されますが、マーカーは表示されません。
getJSON メソッドへの console.log(data) はポイントを返しません。同じコードが「スタンドアロン」ページで機能するのは奇妙です。
それについて何か考えはありますか？前もって感謝します。