Loading Google Map

Question

Loading Google Map

Asked 6 years ago

Viewed 44 times

0

I want to link to a website I’m developing a Store API.

I am using the following Google API - https://developers.google.com/maps/documentation/javascript/examples/marker-labels?hl=pt-br

If I copy the entire code inside an HTML, it works well, if I put it inside my site, the map does not load and shows no errors.

<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>

and then I put the div

I’m trying to spin inside http://persilux.escritoriomovel.com/

What part of your website code are you posting? there are some possibilities for the code to be resulting in a problem, such as the order of loading the files (JS or CSS).

– Leonardo Bonetti

2018/06/12 at 19:53
Test my answer, if you make any kind of mistake send us the message or the print of it.

– Leonardo Bonetti

2018/06/12 at 20:00
@Leonardobonetti, any more ideas of what might be?

– Suporte Escritoriomovel

2018/06/14 at 13:09

2 answers

Browser other questions tagged api google-maps

You are not signed in. Login or sign up in order to post.

by Suporte Escritoriomovel • **100** points · Answer 1 · 2018-06-14T14:53:11+00:00

Problem was in Laravel’s Section, the scripts were in the head inside the Nav and the div map was in the index, so it didn’t work.

by Leonardo Bonetti • **5,313** points · Answer 2 · 2018-06-12T19:59:42+00:00

It seems obvious, but it goes like this... inside the <head> of your HTML, put this:

<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>

Within the <body> where you want the map to be visible, you put it:

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

There is no Maps API dependency on another library (for example JQUERY) so if you put it in <head> and <body> It’ll be all right...