Skip to content

Instantly share code, notes, and snippets.

@thulioph
Last active January 1, 2016 13:39
Show Gist options
  • Save thulioph/8152405 to your computer and use it in GitHub Desktop.
Save thulioph/8152405 to your computer and use it in GitHub Desktop.
exibir balão de informações ao clicar no pin do mapa / Artigo: API Google Maps V3 - blog.thulioph.com
function initialize() {
// Exibir mapa;
var myLatlng = new google.maps.LatLng(-8.0631495, -34.87131120000004);
var mapOptions = {
zoom: 17,
center: myLatlng,
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Parâmetros do texto que será exibido no clique;
var contentString = '<h2>Marco Zero</h2>' +
'<p>Praça Rio Branco, Recife/PE.</p>' +
'<a href="http://pt.wikipedia.org/wiki/Pra%C3%A7a_Rio_Branco_(Recife)" target="_blank">clique aqui para mais informações</a>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 700
});
// Exibir o mapa na div #mapa;
var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
// Marcador personalizado;
var image = 'https://cdn1.iconfinder.com/data/icons/gpsmapicons/blue/gpsmapicons01.png';
var marcadorPersonalizado = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title: 'Marco Zero - Recife/PE',
animation: google.maps.Animation.BOUNCE
});
// // Exibir texto ao clicar no pin;
google.maps.event.addListener(marcadorPersonalizado, 'click', function() {
infowindow.open(map,marcadorPersonalizado);
});
}
// Função para carregamento assíncrono
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment