Google Maps Basics


Create a simple Google Map

Now let's create a simple Google Map .

The following shows the of London, England Google Map :

example

< ! DOCTYPE html > < html > < head > < script src = " https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap " async defer > </ 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 >

Give it a try »


Instance resolution

We use the above example to analyze Google Map creation process .

Why should an application declare HTML5?

<!DOCTYPE html>

Most browsers use " Standard mode " of HTML5 Document rendering page , This means that your application is compatible with all major browsers .

In addition , without DOCTYPE label , Browsers use hybrid mode (quirks mode) Render page content .

Tips : It should be noted that some " Hybrid mode " In CSS It cannot be used in standard mode . In specific applications , 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 pixel . If you want to use percentages , Can be in <style> The label states , As shown below :

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

This style declaration indicates the of the map module (GoogleMap) answer HTML Height 100%.


add to Google Map API Key

In the following example, the first <script> The label must contain Google Map API:

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

Will google Generated API key Place in key Parameter (key=YOUR_API_KEY).

The sensor Parameters are required , This parameter indicates whether the application uses a sensor ( similar GPS Navigation ) To locate the user's location . The parameter value can be set to true Or false.

HTTPS

If your application is 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>

Load asynchronously

Similarly, we can load after the page is fully loaded Google Map API.

The following example uses window.onload To load the page after it is fully loaded Google Map . loadScript() Function creates the load Google Map API <script> label . In addition, add... At the end of the label callback=initialize parameter , initialize() As a callback function, it will be in API Execute... After full loading :

example

function loadScript ( ) { var script = document . createElement ( " script " ) ; script . type = " text/javascript " ; script . src = " https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize " ; document . body . appendChild ( script ) ; } window . onload = loadScript ;

Give it a try »


Define map properties

Before initializing the map , We need to create a Map Property 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 , The center passes through the coordinates ( Latitude , Longitude ) Create a center point on the map .

Zoom( Scale series )

zoom Property specifies the name of the map Scale series .zoom: 0 Shows a full zoom of the entire earth map .

MapTypeId( The initial type of map )

mapTypeId Property specifies the initial type of the map .

mapTypeId It includes the following four types :

  • google.maps.MapTypeId.HYBRID: The transparent layer of the main street showing the satellite image
  • google.maps.MapTypeId.ROADMAP: Display ordinary street map
  • google.maps.MapTypeId.SATELLITE: Display satellite images
  • google.maps.MapTypeId.TERRAIN: Display with natural features ( Such as terrain and vegetation ) Map of

Where to display Google Map

usually Google Maps are used for <div> Element :

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

be careful : The map will be displayed in div To display the size of the map , So we can <div> Element to set the size of the map .


Create a Map Object

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

The above code uses parameters (mapProp) stay <div> element (id by googleMap) Created a new map .

Tips : If you want to create multiple maps in the page , You just need to add a new map object .

The following example defines four map instances ( The four maps use different map types ):

example

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 ) ;

Give it a try »


Load map

After the window is loaded, execute initialize() Function to initialize Map Object , This ensures that the page is fully loaded before loading Google Map :

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