Google Maps Basics
Google Maps Basics
Creating a Simple Google Map
Now let’s create a simple Google Map.
The following is a Google map showing London, UK:
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Running Instance»
Click the "Run Example" button to view the online example
Example analysis
We use the above example to analyze the creation process of Google Maps.
Why should the application declare HTML5?
Most browsers use the "standards mode" HTML5 document rendering page , which means your application is compatible with all major browsers.
In addition, if there is no DOCTYPE tag, the browser uses mixed mode (quirks mode) to render page content.
Tips: It should be noted that some CSS in "mixed mode" cannot be used in standard mode. In a specific application, all percentage-based sizes must be inherited from the parent block element. If no size is specified in the parent module, the default value is 0 x 0 pixels. If you want to use percentages, you can declare it in the <style> tag, like this:
html {height:100% }
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
This style statement Indicates that the map module (GoogleMap) should HTML height is 100%.
Add Google Maps API Key
In the following example, the first <script> tag must contain Google Maps API:
Place the API key generated by google in the key parameter (key=YOUR_API_KEY).
The sensor parameter is required and is used to indicate whether the application uses a sensor (similar to GPS navigation) to locate the user's location. Parameter value can be set to true or false.
HTTPS
If your application is a secure HTTP (HTTPS: HTTP Secure) application, you can use HTTPS to load Google Map API:
Asynchronous loading
Similarly, we can also load the Google Maps API after the page is fully loaded.
The following example uses window.onload to load Google Maps after the page is fully loaded. The loadScript() function creates the load Google Maps API <script> tag. Also at the end of the tag added callback=initialize parameter, initialize() as a callback function will be executed after the API is fully loaded:
Instance
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:500px;"></div>
</body>
</html>Running instance»
Click the "Run Instance" button to view the online instance
Define map attributes
Before initializing the map, we need to create a Map attribute first Object to define some map properties:
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
center (center point)
The center attribute specifies the center of the map, which passes Coordinates (latitude, longitude) to create a center point on the map.
Zoom (zoom level)
The zoom attribute specifies the zoom level of the map. zoom: 0 shows full zoom of the entire Earth map.
MapTypeId (the map’s initial type)
The mapTypeId property specifies the map’s initial type.
mapTypeId includes the following four types:
google.maps.MapTypeId.HYBRID: Display the main street transparent layer of satellite images
-
google.maps.MapTypeId.ROADMAP: Display ordinary street map
google.maps.MapTypeId.SATELLITE: Display satellite image
google.maps.MapTypeId.TERRAIN: Displays maps with natural features such as terrain and vegetation
Where to display Google Maps
Usually Google Maps are used in <div> elements:
Note: The map will display the size of the map according to the size set in the div, so we can set the size of the map in the <div> element.
Create a Map object
,mapProp);
The above code uses the parameter (mapProp) to create a new map in the <div> element (id is googleMap).
Tips: If you want to create multiple maps on the page, you only need to add a new map object.
The following example defines four map instances (the four maps use different map types):
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Load map
Window loading Then initialize the Map object by executing the initialize() function, which ensures that the Google Map is loaded after the page is fully loaded:
