CodeAve.com(Basic Google Map (v3) with an Image Marker and Info Window - Print View)

Basic Google Map (v3) with an Image Marker and Info Window

This is an extension of the basic map with an image marker Google Maps V3. An image is used as a marker and is placed at the center of the map and a title has been added to display when the mouse pointer hovers over the marker. When you click on the marker an info window will appear. You can place any valid HTML code within the info window, in this example some colored text will display. Comments are placed within the code to help explain the different options for each command.
<html>
<head>
<!-- add a META element with the charset attribute set to "utf-8", as follows Your page must use UTF-8 encoding to create some elements of the map -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!-- Reference to the map control -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<!-- A sensor value is required. True indicates that your application is using a sensor (such as a GPS locator) to determine the user's location. False indicates that you are not-->
<script type="text/javascript">

var map; function initialize() { var myLatlng = new google.maps.LatLng(39.828180,-98.57955);
// sets the center of the map to the varible "LatLong" that contains the coordinates var myOptions = { zoom: 4,
// Zoom level for initial map. Valild vaues range form 0 to 20 center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP
// sets the type of map to be displayed
// HYBRID - displays a transparent layer of major streets on satellite images
// ROADMAP - displays a normal street map
// SATELLITE - displays satellite images
// TERRAIN - displays maps with physical features such as terrain }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var infowindow = new google.maps.InfoWindow();
// set the varible infowindow var marker = new google.maps.Marker
// set the varible marker ( { position: new google.maps.LatLng(39.828180,-98.57955),
// sent the geographic position for the marker map: map,
// puts the marker on the specified map title:"Geographic Center of the Contiguous 48 states",
// text that will display when the mouse cursor hovers over the marker icon: 'http://google-maps-icons.googlecode.com/files/sight.png'
// location of image file that will be used as a marker } ) ; google.maps.event.addListener
// Event addlistener for info window of marker ( marker,
// associates the action with the marker named marker 'click',
// declares which event will trigger the event
// Valid values are as follows
// click, dblclick, mousedown, mousemove, mouseout, mouseover,mouseup, rightclick function() { infowindow.setContent('<font color=#FF00FF>
Geographic Center of the Contiguous 48 states</font>
');
// sets the content for the info window (any valid html will do here infowindow.open(map,marker);
// sets the info window to open based on the event } ); } </script>
</head>
<title>
CodeAve.com/Maps - Basic Google Map with an Image Marker v3</title>
<body bgcolor="#FFFFFF" onload="initialize()">
<table align=center border=1 width=750 height=500>
<tr>
<td valign=top>
<!-- Notice just in case the browser does not support Javascript -->
<noscript>
<b>
JavaScript must be enabled in order for you to use Google Maps.</b>
<br>
However, it seems JavaScript is either disabled or not supported by your browser. <br>
To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript>
<div id="map_canvas" style="width:750; height:500">
</div>
<!-- div tag set to display the map with width and height in pixels width and height can also be expressed by percent-->
</td>
</tr>
</table>
</body>
</html>


http://www.codeave.com/maps/code.asp?u_log=9004