Google Maps Chi...login
Google Maps Chinese API Manual
author:php.cn  update time:2022-04-14 16:36:56

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?

<!DOCTYPE html>

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:

<style type="text/css">
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:

< script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE "></script>

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:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor =TRUE_OR_FALSE"></script>

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:

var mapProp = {
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:

<div id="googleMap" style="width:500px;height:380px;"></div>

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

var map=new google.maps.Map(document.getElementById("googleMap")
,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:

google.maps.event.addDomListener(window, 'load', initialize );

php.cn