Google Maps Basics
Create a simple Google Map
Now let's create a simple Google Map.
Here is a Google map showing London, UK:
Example
<html><head><scriptsrc="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"></div></body></html>Example renderings (can be copied and run directly, of course you need to be able to access Google)
Example analysis
We use the above example to analyze the creation process of Google Maps.
Why does an application declare HTML5?
<!DOCTYPE html>
Most browsers use "standard mode" HTML5 document rendering pages, which means your application is compatible with major browsers.
In addition, if there is no DOCTYPE tag, the browser uses quirks mode to render the page content.
Tip: It should be noted that some "promiscuous mode" CSS cannot be used with 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 pixels. If you want to use percentages, you can declare them in the <style> tag as follows:
<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 have an HTML height of 100%.
Add Google Maps API Key
The Google Maps API must be included in the first <script> tag in the following example:
<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, which indicates whether the application uses a sensor (similar to GPS navigation) to locate the user's location. The 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 the Google Maps API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>
Asynchronous loading
Similarly, we can load the Google Maps API after the page is fully loaded.
The following example uses window.onload to achieve full loading of Google Maps. The loadScript() function creates the loading Google Maps API <script> tag. In addition, the callback=initialize parameter is added at the end of the tag. The initialize() as the callback function will be executed after the API is fully loaded:
Example
<!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"></div></body></html>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 property specifies the center of the map, which creates a center point on the map through coordinates (latitude, longitude).
Zoom (zoom series)
The zoom property specifies the zoom range of the map. zoom: 0 shows the full zoom of the entire Earth map.
MapTypeId (the initial type of the map)
The mapTypeId property specifies the initial type of the map.
mapTypeId includes the following four types:
google.maps.MapTypeId.HYBRID: The main street transparent layer that displays satellite image
google.maps.MapTypeId.ROADMAP: Show normal street map
google.maps.MapTypeId.SATELLITE: Display satellite image
google.maps.MapTypeId.TERRAIN: Show maps with natural features such as terrain and vegetation
Where to display Google Maps
Usually Google Maps is used in <div> elements:
<div id="googleMap"></div>
Note: The map will display the size of the map with 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).
Tip: If you want to create multiple maps on the page, you just need to add a new map object.
The following example defines four map instances (four maps use different map types):
Example
<html><head><scriptsrc="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"></div><br><div id="googleMap2"></div><br><div id="googleMap3"></div><br><div id="googleMap4"></div></body></html>Loading the map
After the window is loaded, the Map object is initialized by executing the initialize() function, which ensures that Google Maps is loaded after the page is fully loaded:
google.maps.event.addDomListener(window, 'load', initialize);
The above is a compilation of the basic information of Google Maps. We will continue to add it later. Thank you for your support for this site!