Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leno Sousa

Css no InfoWindow do Google Maps

Recommended Posts

Boa tarde, tenho um mapa do google e gostaria de alterar o balão do mapa (InfoWindow) e colocar um estilo CSS.

Segue o Código

function initialize() {	
			directionsDisplay = new google.maps.DirectionsRenderer();
			geocoder = new google.maps.Geocoder();
			var myLatlng = new google.maps.LatLng(-3.0024860,-47.3531080);
			var myOptions = {
				zoom: 15,
				center: myLatlng,
				mapTypeControl: true,
				mapTypeId: google.maps.MapTypeId.ROADMAP
				//mapTypeId: google.maps.MapTypeId.SATELLITE
		  	}
		  	map = new google.maps.Map(document.getElementById("mapa-local"), myOptions);
			
			var contentString = '<b>Leno Sousa</b><br>'+
				'Rua Estado de Goiás 98<br>Paragominas / Pará<br>Fone: (91) 8289-0663';
				
			var infowindow = new google.maps.InfoWindow({
				content: contentString
			});
		
			var marker = new google.maps.Marker({
				position: myLatlng,
				map: map,
				title: 'Leno Sousa'
			});
			google.maps.event.addListener(marker, 'click', function() {
			  infowindow.open(map,marker);
			});
			infowindow.open(map,marker);
			
		  	directionsDisplay.setMap(map);
			directionsDisplay.setPanel(document.getElementById("directions"));
		}

Já tentei várias vezes e não consegui. Desde já agradeço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá

 

Você pode escrever elementos com classes ou id e controla-los por css ou inserir style diretamente no elemento:

var contentString = '<div id="content"><b>Leno Sousa</b><br>'+
        'Rua Estado de Goiás 98<br>Paragominas / Pará<br>Fone: (91) 8289-0663<div>';
				
var infowindow = new google.maps.InfoWindow({
	content: contentString
});
#content{
    width: 300px;
    height: 100px;
}

Segue exemplo: Mapa JSFIDDLE
Espero ter ajudado...
Att, Back

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.