The best Google Maps base Tutorial In 2024, In this tutorial you can learn Create a simple Google Maps,Examples,Examples of analytical,Why should declare the application HTML5?,Add Google Maps API Key,Examples,Custom Map Properties,Where to display Google Maps,Create a Map Object,Examples,Loading Map,
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: