Google maps map turns gray, but when I change the browser zoom back, what should I do?

Asked

Viewed 868 times

3

So guys, I have 2 parts of the system that I work on, where I use a map to show the address of the property or person. Except that in immovable works perfectly, but in the person (q has the same codes) I have to zoom in on the browser that gets perfect again.... Does anyone know what could happen? Thank you !

something important that I forgot to mention, he is in a partialView , then he is being placed there while the page loads...

Remembering that this code already existed in the system I just solved some problems.

    -edit-3
    var map;
    var marker;
    /* ============================ MÉTODOS PARA O MAPA ============================ */
    function initializeMap() {
        latlng = new google.maps.LatLng(-15.796892001990338, -47.890573438861864);
        var myOptions = { 
            zoom: 14, 
            center: latlng, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        createMarker(latlng);

        var position = undefined;
        <% var endereco = this.Model.Endereco;
        if (endereco.Latitude.HasValue && endereco.Longitude.HasValue)
        {%>
               position = new google.maps.LatLng(
               <%: endereco.Latitude.GetValueOrDefault().ToString(System.Globalization.CultureInfo.InvariantCulture) %>, 
               <%: endereco.Longitude.GetValueOrDefault().ToString(System.Globalization.CultureInfo.InvariantCulture) %>);
               changeMarkerPosition(position);
               <%}
        else
        {%>
        changeMarkerPositionByAddress(getEnderecoCompleto());
        <%}%>

        infowindow = new google.maps.InfoWindow();

        $("#mapaContato").css('display','block');
    }

    function createMarker(position) {
        map.setCenter(position);
        markerOptions = {
            draggable: true,
            map: map,
            position: position,
            visible: true
        };
        marker = new google.maps.Marker(markerOptions);
        google.maps.event.addListener(marker, 'position_changed', OnMarkerPositionChanged);
    }

    function changeMarkerPosition(position) {
        marker.setPosition(position);
        map.setCenter(position);
    }

    function changeMarkerPositionByAddress(address) {
        geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address, region: "BR" }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                local = results[0].geometry.location;
                changeMarkerPosition(local);
            } else if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
                alert("Não foi localizada uma coordenada geográfica para este endereço.\nFavor localizar o ponto manualmente no mapa.");
            } else {
                alert("A busca no mapa resultou em um erro inesperado.\nErro: " + status);
            }
        });
    }

    function OnMarkerPositionChanged() {
        var local = marker.getPosition();
        updateMarkerPosition(local);
    }

    function updateMarkerPosition(latLng) {
        $("#Endereco_Latitude").val(doubleToString(latLng.lat()));
        $("#Endereco_Longitude").val(doubleToString(latLng.lng()));
    }

    function doubleToString(value) {
        <% var culture = System.Globalization.CultureInfo.CurrentCulture;
        var formatInfo = (System.Globalization.NumberFormatInfo)culture.GetFormat(typeof(System.Globalization.NumberFormatInfo));
        if (formatInfo.NumberDecimalSeparator == "," && formatInfo.NumberGroupSeparator == ".")
        {%>
               return value.toString().replace(".", ",");
               <%}
        else
        {%>
        return value.toString();
        <%}
    %>
    }
  • You’d need to see the code to understand it better. When the map turns gray I use resize, google.maps.Event.Trigger(map, 'resize'); that it comes back, but need to see in your code when it is turning gray.

  • I put it ! D

  • As I saw that you are using the variable "map" as global in the functions I believe that to put map.addListener('Idle', Function () { google.maps.Event.Trigger(this, 'resize');}); after the map = new google.maps.Map(Document.getElementById("map_canvas"), myOptions); . This function will make every time the map changes position it tries to reload, thus making the map no longer gray.

  • Otherwise this may be because the div that receives the map is not appearing at the time the map is instantiated. Google maps does not work in hidden div, you should show the div and then try to give a new google.maps.Map

  • aaaa must be just this second question, because as you can see, I give a ''display: block" to appear after q reloads. but I’ve already taken the test to remove it. Thanks I’ll be back with the feedback

  • Andrévicente sorry the delay I had to leave emergency, but now only when I move the mouse q it works. if he just carries the page he stays gray, if I move it, it works

Show 1 more comment

1 answer

2

I solved the problem, in this case, the map was being rendered inside a partial view. So I put the method to initialize the map in the view q loads the partial view. And then when it started it rendered normally. Thanks André uses reply helped me in that!

Browser other questions tagged

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