I'm trying to insert a google maps script with multiple markers and infowindows in my project. What I want to do is: -set a style css for infowindows (border, background-color, width, height, etc...) -move the closing button of the infowindows outside the infowindows (like in position relative) -set an automatic zoom to show clearly markers and infowindows
This is my code:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
});
var markers = [
{ lat: 11.111111, lng: 11.111111, name: "<hgroup><h1>Title</h1><h2>Address</h2></hgroup>" },
{ lat: 22.222222, lng: 22.222222, name: "<hgroup><h1>Title</h1><h2>Address</h2></hgroup>" }
];
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
var content = document.createElement("div");
var title = document.createElement("div");
title.innerHTML = data.name;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
}
</script>
Could you explain step by step how to do what I want? I don't know Javascript, this code is a copy/paste edited by me, so I ask you to be clear and simple! Thank you!
