HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Now let's create a simple Google Maps.
The following is a graph showing the Google Maps London:
In the above example we create a process to resolve the Google map.
Most browsers use the "standard model" of HTML5 rendering the page document, which means that your application is compatible with all major browsers.
In addition, if there is no DOCTYPE tag, the browser you use promiscuous mode (quirks mode) for rendering the page content.
Tip: It should be noted that some "promiscuous mode" in the CSS and you can not use the standard mode.In a particular application, all must inherit from parent block elements based on a percentage of the size. If you do not specify the size of the module in the parent, the default value 0 x 0 pixels. If you want to use percentages, can be declared in the <style> tag, as follows:
This map show style declaration module (GoogleMap) should be HTML height of 100%.
In the following example the first <script> tag must be included in Google Maps API:
The google-generated API key placed inkey parameters(key= YOUR_API_KEY).
The sensor parameter is required, the parameter is used to indicate whether the application uses a sensor (similar to the GPS navigation) to locate the user's location.Parameter values can be set to true or false.
HTTPS
If your application is secure HTTP (HTTPS: HTTP Secure) application, you can use HTTPS to load the Google Maps API:
Asynchronous loading
Similarly, we can also load the Google Maps API after the page has fully loaded.
The following example uses window.onload to implement fully loaded when the page is loaded Google Maps. loadScript () function creates load the Google Maps API <script> tag. Also at the end of the label to the callback = initialize parameters, initialize () will be executed after the API is fully loaded as the callback function:
Before initializing the map, we need to create a Map object to define property map properties:
center (center)
Center attribute specifies the map center, which by coordinates (latitude, longitude) to create a central point on the map.
Zoom (Zoom Series)
zoom map zoom property specifies the number of stages. zoom: 0 show the full scale the entire map of the Earth.
MapTypeId (initial type map)
mapTypeId type attribute specifies the initial map.
mapTypeId includes the following four types:
Typically used in Google Maps <div> element:
Note: The size ofthe map will be div set to show the size of the map, so we can set the size of the map in the <div> element.
The above code uses the parameter (mapProp) in the <div> element (id is googleMap) creates a new map.
Tip: If youwant to create multiple map pages, you only need to add a new map objects can be.
The following example defines four instance maps (maps using four different map types):
Map window to initialize the object after loading by executing the initialize () function, which ensures that the page has fully loaded before loading the Google Maps: