Google Maps Not Rendering Completely on Page

Google Maps not rendering completely on page?

I'm not able to reproduce the issue you are having, but it looks similar to another issue I've seen with google maps.

It looks like you might be running afoul of the way google maps determines which tiles are in view. It calculates this only once, when the map is loaded into the div the first time, and if the div grows, then not enough map will be drawn. Fortunately, this is easy to deal with. any time the container may have resized, use the checkResize() method on the map instance, and the clipping area will be recomputed from the container's current size.

Google map not rendering properly when called via function in a for loop

Make sure you initialise your maps after the Google Maps API is loaded. To do that just point the callback part of the google's url to the function that will handle that (see example below).

Also as Lee stated in his comment do not use numbers as element ids. Lee's suggestion to use a prefix is spot on and you should consider using it.

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Coordinates)
            </th>
        </tr>
    </thead>
    <tbody>
        @{
            int count = 0;
        }
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <div class="map" id="map_@count" style="height:400px;width:700px;" data-coord="@item.Coordinates"></div>
                    <!-- REMOVED script here and added more data to the div element above -->
                    @Html.DisplayFor(modelItem => item.Coordinates)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Coordinates">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.Coordinates">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Coordinates">Delete</a>
                </td>
            </tr>
            count++;
        }
    </tbody>
</table>
<script>
  // this function will be called by google's api once loaded
  function loaded() {
    // assuming each map container has a class "map",
    let maps = document.querySelectorAll('.map');
    maps.forEach(map => initMap(map));
  }
  function initMap(map) {
    var myCenter = new google.maps.LatLng(map.dataset.coord); // retrieving coords from data attribute
    var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(map, mapProp);
    var marker = new google.maps.Marker({ position: myCenter });
    marker.setMap(map);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=loaded"></script>

Edit: Have a look at below snippet. I haven't spotted before that the coords have to be passed as numbers.

let maps = document.querySelectorAll('.map')

function loaded() {
  maps.forEach(map => initMap(map))
}

function initMap(element) {
  let xy = element.dataset.coords.split(',').map(a => parseFloat(a))
  let center = new google.maps.LatLng(xy[0], xy[1])
  let props = { center: center, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
  let map = new google.maps.Map(element, props);
  let marker = new google.maps.Marker({ position: center });
  marker.setMap(map);
}

.map {
  width: 400px;
  height: 400px;
  background: yellow;
  margin-bottom: 15px;
}

<!-- The British Museum -->
<div class="map" data-coords="51.5145532,-0.1167918"></div>
<!-- Castello Sforzesco -->
<div class="map" data-coords="45.4636261,9.1714131"></div>
<!-- Nordscheleife -->
<div class="map" data-coords="50.3341015,6.9404738"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=&callback=loaded" async defer></script>

Google's Static Maps not Rendering on Page

In the Quick Example section of the static maps documentation I see that spaces in the query string have to be encoded, e.g. as +.

Assuming that your $Address variable can contain spaces, you'll need to ensure that you properly encode them before placing them inside your img's src. The difference from the browser bar could be that there the browser takes care of the encoding for you, but inside an html element's attribute it doesn't.

Google Map is not rendering properly for same div if tried for second request

Thanks ..Problem is solved , I have applied google.maps.event.trigger(garagemapinfopopup.Map, 'resize'); in parent page, after child loaded in div.

Google Maps Javascript API not rendering

You have two problems with the posted code:

1. google.maps.event.addDomListener(window, "load", loadMap()); executes the loadMap function immediately and assigns the return value as the function to be executed on window load. It should be:

google.maps.event.addDomListener(window, "load", loadMap);

2. your map doesn't have a size. It is 100% of the div with class="content" which doesn't have a size.

<div class="content">
  <div id="map" style="width: 100%;"></div>
</div>

The CSS should be:

#map {
height: 75%;
}

html, body, .content {
    height: 100%;
    margin: 0;
    padding: 0;
}

(or whatever matches your layout and gives a height to the div with `class="content")

proof of concept fiddle

code snippet:

var map;

function loadMap() {

  var mapOptions = {

    center: new google.maps.LatLng(28.39404819, -91.38743867),

    zoom: 7,

    mapTypeId: google.maps.MapTypeId.HYBRID

  };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);

}

google.maps.event.addDomListener(window, "load", loadMap);

#map {

  height: 75%;

}

html,

body,

.content {

  height: 100%;

  margin: 0;

  padding: 0;

}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div class="content">

  <div id="map" style="width: 100%;"></div>

</div>

Google Map not rendering correctly after first view with Backbone.js

Your view works on a node not appended to the DOM, thus without size, a situation Google Map is not very fond of. It is your router, via PageSlider, that does append the node after your render function has occurred.
Here is a demo of your predicament : http://jsfiddle.net/3C7g3/

You have several options to solve it:

• call google.maps.event.trigger(map, 'resize') after the node is inserted into the DOM (this bit of code corresponds to your router entry for the map)

  // assuming you stored the map object in your view
  require(["app/views/Map"], function (Map) {
      var view = new Map();
      slider.slidePage(view.$el);
      google.maps.event.trigger(view.map, 'resize');
   });
  

  http://jsfiddle.net/3C7g3/1/

• insert the node into DOM before calling render. In your case, that probably means removing render from the view.initialize and calling view.render after container.append(page); in your slidePageFrom method.

  http://jsfiddle.net/3C7g3/2/

• a more hackish way would be to temporarily add the element to the DOM, apply Google Maps, and then remove it from the DOM

  initMap: function () {
      // assuming a temp class that hides the element. For example,
     // .temp {position: absolute; visibility:hidden; }
      this.$el.addClass('temp');
      $('body').append(this.$el);
      // ...
      this.$el.remove();
      this.$el.removeClass('temp');
  }
  

  http://jsfiddle.net/3C7g3/3/

---

Related Topics