O controle de zoom do Google Maps está desarrumado

172

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.

insira a descrição da imagem aqui

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.

Dónal
fonte
12
Esse problema não ocorre com o Bootstrap se você usar is map_canvas como o ID da div do mapa.
Ben

Respostas:

109

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.

Konrad Dzwinel
fonte
12
Isso também é verdade se você estiver usando o Bootstrap do Twitter, eles têm um img {max-width: 100%} que estraga tudo. Ele deve ser corrigido na ramificação 2.0.2
Ken
1
Muitos arquivos de redefinição CSS também foram img {max-width:100%;}definidos.
1117 avesse
Impressionante! Eu também estava tendo problemas com isso e recentemente mudei para o bootstrap css. Mucho ++++
Kevin Mansel
Teve o mesmo problema com o jquery mobile. Eles têm .ui-mobile img {max-width: 100%;}em seu CSS que tiveram que ser removidos.
Jeremy
28
a correção que a inicialização apenas dar seus mapas div class Google-Maps
Samy Massoud
80
#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>
Alinhado
fonte
21

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;
}
lãs
fonte
16

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

poostchi
fonte
5

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

.gmnoprint img { max-width: none; } 
Fernando Prieto
fonte
4

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.

Dylan Becks
fonte
! important pode não ser necessário se o seu seletor for mais específico.
Voodoocode 7/11
2

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.

dmzza
fonte
0

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!

Impiriumjbb
fonte
0

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/

Glyn
fonte