私はグーグルマップapi(v3)を使用していますが、マップにマーカーを追加する必要があります。実は、表示に問題はありませんでしたが、しばらくするとマーカーが表示されなくなったり、より正確に表示されたりすることがあります。
これが私が何をしているのか、そして問題がどこから来るのかを見ることができるようにいくつかのコードです:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[KEY]&sensor=true"></script>
<script type="text/javascript" src="google.js"></script>
<script type="text/javascript" src="dataLoading.js"></script>
</head>
<body onload="initializeMaps();">
<div id="map_canvas"></div>
<script type="text/javascript">
loadSpots();
</script>
</body>
</html>
そしてここにjavascriptコードがあります:
var map;
var yMarker = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
var gMarker = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
var bMarker = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
var pMarker = 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png';
function initializeMaps()
{
geocoder = new google.maps.Geocoder();
var mapOptions =
{
center: new google.maps.LatLng(46.52863469527167, 2.4389648437),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function getLatlng(address, name, type)
{
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
var marker = new google.maps.Marker({
title: name,
map: map,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location
});
marker.setIcon((type == 2 ? gMarker : (type == 3 ? bMarker : (type == 4 ? pMarker : yMarker))));
}
});
}
function addMarker(address, name, type)
{
if (address != null && address != "")
getLatlng(address, name, type);
}
編集1
LoadSpots()は、ajaxリクエストでDBからデータを取得し、addMarker関数を呼び出す関数です。