Google MapsAPIマーカーが機能しない

debugcn 投稿 Dev

user3842086

単にマーカーを表示させようとしています。Google Maps APIを使用するのはこれが初めてなので、ガイドとしてGoogleの例を使用しています。以下のコードで構文上の問題は見つかりません。マーカーが読み込まれないのはなぜですか？

<!DOCTYPE html>
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100%; z-index: 0;}
      #gmnoprint {width: auto;}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Map of Floor Plan</title> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function CustomMapType() {
}
CustomMapType.prototype.tileSize = new google.maps.Size(256,256);
CustomMapType.prototype.maxZoom = 4;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var baseURL = 'C:/Temp';
    baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.backgroundColor = '#1B2D33';
    div.style.backgroundImage = 'url(' + baseURL + ')';
    return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();
function initialize() {
    var myLatlng = new google.maps.LatLng(65, -56);
    var mapOptions = {
        minZoom: 0,
        maxZoom: 4,
        isPng: true,
        mapTypeControl: false,
        streetViewControl: false,
        center: new google.maps.LatLng(65.07,-56.08),     
        zoom: 3,
        mapTypeControlOptions: {
        mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World'
    });

    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
    map.mapTypes.set('custom',CustomMapType);
    map.setMapTypeId('custom');
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="background: #1B2D33;"></div> 
</body>
</html>

アント・ユルコビッチ

マップは、marker作成時に初期化されていません。

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World'
});

map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

したがって、map最初に作成してから使用する必要があります。

map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World'
});

または、マップを初期化した後、マーカーでsetMapを呼び出します。

var marker = new google.maps.Marker({
    position: myLatlng,
    title: 'Hello World'
});

map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

marker.setMap(map);

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]