Google map infowindow
HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<div id="map_canvas" style="width:600px;height:300px" data-lat='40.8152' data-long='-73.0455'></div>
<div id = 'infowindow1' class="address-block">
<span>
<div class="gymlogo"> <img src="https://g.twimg.com/Twitter_logo_blue.png" alt="" height="80px" width="100px"/></div>
<h2>Gold Gym **</h2>
<p> 1234 Street st., New York, New York 11006<br />+1-123-333-7888</p>
</span>
</div>
</div>
<style>
.address-block {
left: 23%;
position: absolute;
top: 69px;
}
.address-block span {
position: absolute;
width:200px;
color: #555;
background: #fff;
padding:10px;
line-height: 30px;
text-align: center;
border-radius: 36px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
.address-block .gymlogo{
width:100px;
height:100px;
padding:5px;
overflow:hidden;
border-radius:70px;
margin:0 auto;
margin-top:-80px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
</style>
CSS
#infowindow1 {
z-index: 1001;
position: absolute;
display: none;
}
JavaScript
$(document).ready(function(){
var params = {'lat':$('#map_canvas').data('lat'),'long':$('#map_canvas').data('long')};
google.maps.event.addDomListener(window, 'load', initialize(params));
});
function initialize(coordinates) {
var mapOptions = {
center: new google.maps.LatLng(coordinates.lat,coordinates.long),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
/*
var infoWindow = new google.maps.InfoWindow({
content: $('#infowindow1').html(),
position:new google.maps.LatLng(coordinates.lat,coordinates.long),
});
*/
var marker = new google.maps.Marker({
position: new google.maps.LatLng(coordinates.lat,coordinates.long),
map: map,
});
//infoWindow.open(map);
//marker.setMap(map);
google.maps.event.addListener(map, 'click', function(event) {
console.dir(event);
var x = event.pixel.x; //we clicked here
var y = event.pixel.y;
$('#infowindow1').css('left',x).css('top', y).show();
});
}