Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Customized Control Example for Google Maps API

View Example


Notes

The key is to use map.controls property:
        var html = "<input type='text' size='40' value='Please input a string'>";		
        var controlDiv = document.createElement('DIV');
        controlDiv.setAttribute('class', "control_div");
        controlDiv.innerHTML = html;
        controlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);


Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Customized Control</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
.control_div {
	margin: 5px; 
	padding: 5px;
	background-color: #fff;
	opacity: 0.85; 
	filter: "alpha(opacity=85)"; 
	width:auto; 
	height:auto; 
	color: #0A6E67;
	display: block;
	line-height: 20px;
}
</style>
<script type="text/javascript">
    function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        var html = "<input type='text' size='40' value='Please input a string'>";		
        var controlDiv = document.createElement('DIV');
        controlDiv.setAttribute('class', "control_div");
        controlDiv.innerHTML = html;
        controlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);
    }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>