Latest web development tutorials

Google Maps base

Create a simple Google Maps

Now let's create a simple Google Maps.

The following is a graph showing the Google Maps London:

Examples

<!DOCTYPE html>
<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>

try it"

Examples of analytical

In the above example we create a process to resolve the Google map.

Why should declare the application HTML5?

<!DOCTYPE html>

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:

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

This map show style declaration module (GoogleMap) should be HTML height of 100%.

Add Google Maps API Key

In the following example the first <script> tag must be included in Google Maps API:

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

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:

<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 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:

Examples

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

try it"

Custom Map Properties

Before initializing the map, we need to create a Map object to define property map properties:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

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:

  • google.maps.MapTypeId.HYBRID: satellite images show the main street of the transparent layer
  • google.maps.MapTypeId.ROADMAP: displaying the normal street map
  • google.maps.MapTypeId.SATELLITE: Show satellite image
  • google.maps.MapTypeId.TERRAIN: displays maps with physical features (such as topography and vegetation) of

Where to display Google Maps

Typically used in Google Maps <div> element:

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

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.

Create a Map Object

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

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

Examples

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

try it"

Loading Map

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:

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