карта Google не работает внутри веб-сайта

Question

var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(18.511325, 73.820176),
          mapTypeId: 'roadmap'
        });

        var iconBase = '';
        var icons = {
          info: {
            icon: iconBase + 'map.png'
          }
        };

        var features = [
          {
            position: new google.maps.LatLng(18.511325, 73.820176),
            type: 'info'
          }
        ];

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
    </script>
    
    <div class="container-fluid">
        <div class="row">
          <div id="map" style="width: 100%; height:100%"></div>
        </div>
    </div>

Карта Google с настраиваемым маркером

Привет, я использую карту Google на своем веб-сайте. Я хочу добавить свой логотип .png вместо маркера Google. Я сгенерировал ключ со страницы Google и добавил его в тег скрипта. Я выполнил все шаги, указанные на странице Google, я написал для него следующий код. Но когда я использую следующий код, он ничего не показывает. Я хочу создать такой же макет, как показано на изображении.

javascript jquery twitter-bootstrap css google-maps-markers

1

Lakhan Khandelwal 24 Июн 2017 в 09:58

Что говорит вывод вашей консоли? API Карт можно использовать только на страницах, обслуживаемых через HTTPS.

–

Chase

24 Июн 2017 в 10:18

Где находится ваш js? У меня это работает, если я помещаю его в тег

3 ответа

Answer 1

Удалите все внешние div. просто удалите и попробуйте, что ваш код работает. обратитесь к этому вопросу: Карты Google не работают, когда они находятся внутри div

var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(18.511325, 73.820176),
          mapTypeId: 'roadmap'
        });

        var iconBase = '';
        var icons = {
          info: {
            icon: iconBase + 'map.png'
          }
        };

        var features = [
          {
            position: new google.maps.LatLng(18.511325, 73.820176),
            type: 'info'
          }
        ];

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeuMlx32V1fYT3wRAa1wEjjtQuAI6wATM&callback=initMap">
    </script>
    
<div class="row"  style="width: 100%; height:100%">
 <div id="map"></div>
 </div>

0

Dinesh undefined 24 Июн 2017 в 10:37

Он работает на другой странице, но когда я добавляю этот код в свой проект в

Вы должны установить размер вашего div#map следующим образом:

#map1 {
  height: 100%;
  width: 100%;
}

Конечно, отрегулируйте в соответствии с вашими потребностями.

0

SanjiBukai 24 Июн 2017 в 12:05

Я добавил #map {height: 100%; ширина: 100%; } но он не работает

–

Lakhan Khandelwal

24 Июн 2017 в 10:19

Попробуйте встроить так: <div id="map" style="width: 100%; height:100%"></div>

–

SanjiBukai

24 Июн 2017 в 10:20

Вы пробовали только jsfiddle ? Вы пробовали также в реальном браузере?

–

SanjiBukai

24 Июн 2017 в 11:06

На jsfiddle он не работает, когда я пытался. Но на jsbin это так. Теперь этого больше нет, но пока что ваш ключ API все еще действителен? Кроме того, не забудьте использовать #map1, поскольку в предоставленном вами коде вы устанавливаете для идентификатора значение map1, а не map.

–

SanjiBukai

24 Июн 2017 в 12:03

Суть вашей проблемы заключается в интеграции карты Google с bootstrap. В деталях, вы должны установить стиль высоты css родительского div тега карты (.container-fluid) на 100%;

Чтобы следующая демонстрация работала нормально, вы должны предоставить свой ключ API карты Google и файл изображения для маркера.

<!DOCTYPE html>
<html>

<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        
        html,
        body,
        .container-fluid {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div id="map"></div>
    </div>
    <script>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 26.880,
                    lng: 112.644
                },
                zoom: 8
            });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(26.880, 112.644),
                map: map,
                draggable: true,
                icon: '/images/github-youtube.jpg'// your image file path
            });

            marker.setMap(map);
        }
    </script>

    <!-- your google map api key : xxxx-->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>

PS: это первый раз, когда я использую карты Google, так что, возможно, какой-то код странный. Я попробовал следующую процедуру.

1. см. Страницу начала работы с картами Google.

2. добавить индивидуальный маркер.

3. интегрироваться с бутстрапом.

Надеюсь, это поможет тебе.

0

YinchaoOnline 24 Июн 2017 в 18:35

Answer 2

Вы должны установить размер вашего div#map следующим образом:

#map1 {
  height: 100%;
  width: 100%;
}

Конечно, отрегулируйте в соответствии с вашими потребностями.

0

SanjiBukai 24 Июн 2017 в 12:05

Я добавил #map {height: 100%; ширина: 100%; } но он не работает

–

Lakhan Khandelwal

24 Июн 2017 в 10:19

Попробуйте встроить так: <div id="map" style="width: 100%; height:100%"></div>

–

SanjiBukai

24 Июн 2017 в 10:20

Вы пробовали только jsfiddle ? Вы пробовали также в реальном браузере?

–

SanjiBukai

24 Июн 2017 в 11:06

На jsfiddle он не работает, когда я пытался. Но на jsbin это так. Теперь этого больше нет, но пока что ваш ключ API все еще действителен? Кроме того, не забудьте использовать #map1, поскольку в предоставленном вами коде вы устанавливаете для идентификатора значение map1, а не map.

–

SanjiBukai

24 Июн 2017 в 12:03

Answer 3

Суть вашей проблемы заключается в интеграции карты Google с bootstrap. В деталях, вы должны установить стиль высоты css родительского div тега карты (.container-fluid) на 100%;

Чтобы следующая демонстрация работала нормально, вы должны предоставить свой ключ API карты Google и файл изображения для маркера.

<!DOCTYPE html>
<html>

<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
        
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        
        html,
        body,
        .container-fluid {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div id="map"></div>
    </div>
    <script>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 26.880,
                    lng: 112.644
                },
                zoom: 8
            });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(26.880, 112.644),
                map: map,
                draggable: true,
                icon: '/images/github-youtube.jpg'// your image file path
            });

            marker.setMap(map);
        }
    </script>

    <!-- your google map api key : xxxx-->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>

PS: это первый раз, когда я использую карты Google, так что, возможно, какой-то код странный. Я попробовал следующую процедуру.

1. см. Страницу начала работы с картами Google.

2. добавить индивидуальный маркер.

3. интегрироваться с бутстрапом.

Надеюсь, это поможет тебе.

0

YinchaoOnline 24 Июн 2017 в 18:35

карта Google не работает внутри веб-сайта

3 ответа

Похожие вопросы

Новые вопросы

javascript