overlayView

overlayview googlemaps

by SaulBurgos

HTML

<title>custom overlayview</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
     <script src="http://dl.dropbox.com/u/62244909/overlayviewcustom/userCustomOverlay.js"></script>



<body>
<button id="button1" type="button">load Image</button>
<input id="urlImg" type="text" placeholder="Url your Image" />
    <div id="googleMap" ></div>
</body>

</html>

CSS

#googleMap {
    
    height:300px;
    width:400px;  
    border:1px solid black;
}

JavaScript

var position = new google.maps.LatLng(48.840709378357865, 2.3239531543016367); // init center for map
var map;
			

//jQuery code
$(document).ready(function() {

	$('#button1').on('click',function(){
		var mapOptions = {
			center: position,
			zoom: 11,
			scaleControl : true,
			mapTypeId: google.maps.MapTypeId.ROADMAP 
		};
		
		map = new google.maps.Map(document.getElementById("googleMap"),	mapOptions);
		
        google.maps.event.addListenerOnce(map, 'idle', function(){
	
		ImgUserBackground = new USGSOverlay(this.getBounds(), $('#urlImg').val(), map);
			
	
		
	    });
	});
	

});