Не отображается маркер в Google Maps

395

15 декабря 2016, 16:20

Карта отображается, а маркер - нет. В чем ошибка?

Функция находится в <body>:

<div id="map_canvas">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(53.885175, 27.454120);
            var settings = {
                zoom: 16,
                center: latlng,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
        }
        var companyPos = new google.maps.LatLng(53.885175, 27.454120);
        var companyMarker = new google.maps.Marker({
            position: companyPos,
            map: map,
            //title:"Merc",         
        });
    </script>
</div>

Answer 1

Проблема в том, что переменная map не существует внутри кода:

var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
});

По той причине, что map - локальная переменная внутри функции initialize.

Имеет смысл смысл весь код размести внутри функции initialize:

function initialize() {
    var latlng = new google.maps.LatLng(53.885175, 27.454120);
    var settings = {
        zoom: 16,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
    var companyPos = new google.maps.LatLng(53.885175, 27.454120);
    var companyMarker = new google.maps.Marker({
        position: companyPos,
        map: map,       
    });
}

Полный пример в fiddle.