@FilatovNikita

Почему не отображается метка google api?

<script type="text/javascript">
            // When the window has finished loading create our google map below
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                // Basic options for a simple Google Map
                // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
                var mapOptions = {
                    // How zoomed in you want the map to start at (always required)
                    zoom: 17,

                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(50.818779, 8.774863), // Marburg & Region, Service, Marburg Hostel

                    // How you would like to style the map. 
                    // This is where you would paste any style found on Snazzy Maps.
                    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
                  };

                // Get the HTML DOM element that will contain your map 
                // We are using a div with id="map" seen below in the <body>
                var mapElement = document.getElementById('map');

                // Create the Google Map using our element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);

                // Let's also add a marker while we're at it
                var image = 'img/ic-location-green.png';
                var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(50.818779, 8.774863),
                  map: map,
                  icon: image,
                  title: 'Marburg & Region, Service, Marburg Hoste'
                });
              }
            </script>
            <script type="text/javascript">
            // When the window has finished loading create our google map below
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                // Basic options for a simple Google Map
                // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
                var mapOptions = {
                    // How zoomed in you want the map to start at (always required)
                    zoom: 17,

                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(50.818779, 8.774863), // Marburg & Region, Service, Marburg Hostel

                    // How you would like to style the map. 
                    // This is where you would paste any style found on Snazzy Maps.
                    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
                  };

                // Get the HTML DOM element that will contain your map 
                // We are using a div with id="map2" seen below in the <body>
                var mapElement = document.getElementById('map2');

                // Create the Google Map using our element and options defined above
                var map2 = new google.maps.Map(mapElement, mapOptions);

                // Let's also add a marker while we're at it
                var image = 'img/ic-location-green.png';
                var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(50.818779, 8.774863),
                  map: map2,
                  icon: image,
                  title: 'Marburg & Region, Service, Marburg Hoste'
                });
              }

            </script>
            <script>
              function showMemap() {
                var x = document.getElementById('iframe1');
                var y = document.getElementById('tour-dorms');
                if (x.style.display === 'block') {
                  x.style.display = 'none';
                } else {
                  x.style.display = 'block';
                }
                if (y.style.display === 'none') {
                  y.style.display = 'block';
                } else {
                  y.style.display = 'none';
                }
              }
              function showMemap2() {
                var x = document.getElementById('iframe2');
                var y = document.getElementById('tour-privat');
                if (x.style.display === 'block') {
                  x.style.display = 'none';
                } else {
                  x.style.display = 'block';
                }
                if (y.style.display === 'none') {
                  y.style.display = 'block';
                } else {
                  y.style.display = 'none';
                }
              }                           
            </script>

Вот есть код, сама карта отображается, а маркер с координатами не появляется, что только уже не перепробовал, очень буду благодарен, если кто скажет в чем дело, уже 2-й час бьюсь с этим, заранее спасибо !
Вот сам сайт lp.hogwards.uk/20/index.php
  • Вопрос задан
  • 377 просмотров
Пригласить эксперта
Ответы на вопрос 2
@evgen9586
Изучаю Back-end. Люблю Android. Ненавижу Apple
Себе недавно писал эту функцию, делал вот так
function initMap() {
                    var latlng = new google.maps.LatLng(lat, lon);
                    var mapOptions = {

                        center: latlng,
                        zoom: 14,
                        mapTypeControl: false,
                        streetViewControl: false,
                        styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
                    };

                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"Вы знаходитесь в данном месте"
                    });
                }


Всё прекрасно работает
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Eduson Москва
от 60 000 до 90 000 руб.
Madrobots.ru Москва
от 80 000 до 120 000 руб.
United Traders Москва
от 150 000 руб.