9:25 PM
Unknown
The basic element in any Google Maps V3 API application is the "map" itself. We will discusses usage of the basic google.maps.Map object and the basics of map operations. (If you've followed the Version 2 tutorial, much will look the same. However, there are some differences, so please read this artical)
The simplest way to start learning about the Google Maps API is to see a simple example. The following HTML code displays a map centered on Ho Chi Minh city, Vietnam:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(10.823099, 106.629664);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(10.823099, 106.629664);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You can go to http://itouchmap.com/latlong.html type a city name or any location in the Address text box, the web site will return to you its coordinator. Then, you copy the Latitude and Longitude and replace to the code above (var latlng = new google.maps.LatLng(xx.xxxx, yy.yyyyy);)
Hope this helps!
Read more:
Multitab infowindow in Google Map V3
Displaying jquery popup when clicking on an image link in infowindow
Working with a simple infowindow in google map
Adding a tooltip to marker
Add markers to Google Maps
Posted in: Google Maps
2 comments:
thanks for your sharing
Hi,Nice Code!!! One problem is that standard websites are difficult to view the Web Design Cochin and take a long time to download google map on some of these devices with their small screeans and wireless connections. Websites whose pages are narrower in width and take up less bandwidth work much better for mobile devices. Thanks....
Post a Comment