CodeAve.com CodeAve.com - Maps - Google Maps
ASP
JavaScript
CSS
HTML
Maps
·Map Script Writers
·Bing Maps
·Google Maps
·Contents
Links
Mail List
Search
Sitemap


 


Basic Google Map (v3) with a Marker
This is an extension of the basic Google Maps V3. A default marker is placed at the center of the map and a title has been added to display when the mouse pointer hovers over the marker. Comments are placed within the code to help explain the different options for each command.
View the Output
Text View
Print View
Mail this Link

<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 marker = new google.maps.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
}
)
;

}
</script>
</head>
<title>CodeAve.com/Maps - Basic Google Map with a 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>

 



ASP: What's New? | Articles | Script Writers | Database Display | Read/Write
Server Variables | Response Objects | Random Events | Miscellaneous
HTML: Forms | Hyperlinks | Headers | Tables | Hyperlinks | Headers | Text Display
JavaScript: Document Info | Forms | Images | Navigation | Script Writers
CSS: Basics | Page Display | Text Display | Script Writers | Miscellaneous
  • 2014 michael kors
  • air max women 2013
  • 2014 michael kors
  • air max 2014
  • oakley glasses
  • oakley glasses

  • Maps: Map Script Writers | Bing Maps | Google Maps
  • bottes fr
  • ugg boot
  • Privacy Statement

    CodeAve.com is hosted by MyHosting.com
    Donate Food Online with a Mouse Click at TheHungerSite.com
    Donate Land Online with a Mouse Click at TheRainForestSite.com
    © 1999 - 2017 CodeAve.com
    All Rights Reserved