O controle de zoom do Google Maps está desarrumado

Eu uso a API do Google Maps (v.3) para mostrar um mapa com alguns marcadores. Recentemente, notei que o controle usado para ampliar o mapa está desarrumado (nem sempre foi assim). Não tenho ideia de qual é a causa.

Atualizar

Esta postagem originalmente tinha um link para uma página na qual você podia ver o problema, mas o link está quebrado agora, então eu o removi.

Seu CSS estragou tudo. Remova max-width: 100%;na linha 814 e os controles de zoom ficarão bem novamente. Para evitar esses erros, use seletores mais específicos em seu CSS.

#myMap_canvas img {
    max-width: none;
}

corrigi-o para mim, mas eu também queria destacar o comentário sobre a pergunta de @Ben: "Esse problema não ocorre com o Bootstrap se você usar is map_canvas como o ID da div do mapa". Ele tem razão. Não estou usando o Bootstrap, mas o problema começou a ocorrer depois que alterei o ID da div.

A configuração de volta para map_canvas foi corrigida sem a alteração de largura máxima.

<div id="map_canvas"></div>

Se você estiver usando o Bootstrap, basta dar a classe "google-maps". Isso funcionou para mim.

Como alternativa, você pode redefinir tudo para a div do google map como um tipo de solução de último recurso:

HTML:

<div class="mappins-map"><div> 

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

Basta compartilhar a resposta de Max-Favilli:

Com a versão mais recente do google maps api, você precisa deste:

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

Graças a @ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

Se você é um usuário do Twitter Bootstrap, adicione esta linha ao seu CSS:

.gmnoprint img { max-width: none; } 

Eu tive esse problema também e usando

.google-maps img {
    max-width: none;
}

não funcionou. Eu acabei usando

.google-maps img {
    max-width: none !important;
}

e funcionou perfeitamente.

Se você estiver usando o CSS puro do Yahoo, dê à sua div a classe "google-maps", como o Bootstrap, e coloque esta regra no seu CSS:

.google-maps img {
    max-width: none;
    max-height: none;
}

Tanto quanto posso dizer, o Pure CSS não tem como resolver esse problema por conta própria.

Essas opções que vocês me disseram não funcionaram no meu site.

Eu uso o Bootstrap V3 e concentrei-me na funcionalidade. O principal motivo foi que eu havia dado ao meu mapa um ID diferente do arquivo CSS usado para exibir a barra de zoom com o cara amarelo do streetvieuw

Renomeei map_canvas para mapholder e funcionou para mim! De qualquer forma, obrigado pelas dicas que eu deveria olhar para os arquivos CSS!

Eu tentei todas as soluções acima e outras de outros fóruns sem sucesso. foi realmente irritante porque eu tenho outro site que não é do Wordpress, onde o código funcionou perfeitamente. (Eu estava tentando exibir um mapa do Google em uma página do Wordpress, mas os controles de zoom e Streetview estavam distorcidos).

A solução que fiz foi criar um novo arquivo html (copie e cole todo o código no Bloco de Notas e nomeie-o como xyz.html, salve como tipo "todos os arquivos"). Em seguida, faça o upload / ftp para o site e configure uma nova página do Wordpress e use uma função incorporada. Ao editar a página, vá para o editor de texto (não o editor visual) e copie / digite:

http: // URL da página width = "900" height = "950">

Se você alterar as dimensões, lembre-se de alterá-lo nos dois argumentos acima ou obter resultados estranhos.

Lá vamos nós - pode não ser tão inteligente quanto algumas outras respostas, mas funcionou para mim! Evidência aqui: http://a-bc.co.uk/latitude-longitude-finder/