0

Quero vincular a um site que estou desenvolvendo uma API de Lojas.

Estou usando a seguinte API do Google - https://developers.google.com/maps/documentation/javascript/examples/marker-labels?hl=pt-br

Se eu copio o código inteiro dentro de um HTML, funciona de boa, se eu coloco dentro do meu site, o mapa não carrega e não mostra nenhum erro.

<style>
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 80%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 80%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPFf086alCsl076VnHe4ap3nEgCx4hZvU"></script>
    <script>
        // In the following example, markers appear when the user clicks on the map.
        // Each marker is labeled with a single alphabetical character.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var labelIndex = 0;

        function initialize() {
            var bangalore = { lat: 12.97, lng: 77.59 };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: bangalore
            });

            // This event listener calls addMarker() when the map is clicked.
            google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng, map);
            });

            // Add a marker at the center of the map.
            addMarker(bangalore, map);
        }

        // Adds a marker to the map.
        function addMarker(location, map) {
            // Add the marker at the clicked location, and add the next-available label
            // from the array of alphabetical characters.
            var marker = new google.maps.Marker({
                position: location,
                label: labels[labelIndex++ % labels.length],
                map: map
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

e depois coloco a div

Estou tentando rodar dentro de http://persilux.escritoriomovel.com/

3
  • Em qual parte do código do seu site você está colocando? existem algumas possibilidades para que o código esteja resultando num problema, como por exemplo a ordem de carregamento dos arquivos(JS ou CSS). Commented 12/06/2018 às 19:53
  • Testa a minha resposta, se der algum tipo de erro nos mande a mensagem ou o print do mesmo. Commented 12/06/2018 às 20:00
  • @LeonardoBonetti, mais alguma ideia do que pode ser? Commented 14/06/2018 às 13:09

2 Respostas 2

0

Parece o óbvio, mas faz assim... Dentro do <head> do seu HTML, coloca isso:

<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 {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
  // In the following example, markers appear when the user clicks on the map.
  // Each marker is labeled with a single alphabetical character.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var labelIndex = 0;

  function initialize() {
    var bangalore = { lat: 12.97, lng: 77.59 };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: bangalore
    });

    // This event listener calls addMarker() when the map is clicked.
    google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng, map);
    });

    // Add a marker at the center of the map.
    addMarker(bangalore, map);
  }

  // Adds a marker to the map.
  function addMarker(location, map) {
    // Add the marker at the clicked location, and add the next-available label
    // from the array of alphabetical characters.
    var marker = new google.maps.Marker({
      position: location,
      label: labels[labelIndex++ % labels.length],
      map: map
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Dentro do <body> onde você quer que o mapa fique visivel, você coloca isso:

<div id="map"></div>

Não há nenhuma dependência do Maps API em relação a outra biblioteca(por exemplo o JQUERY) então se você colocar no <head> e <body> certinho vai dar certo...

1
0

Problema estava no section do laravel, os scripts ficavam no head dentro do Nav e o div map ficava no index, por isso não funcionava.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .