Redsuncube: Discuss about Google Maps Basic

Let us consider a example....

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></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>

Explanation:

1. Load the Google API

The Google Maps API is a JavaScript library. It can be added to a web page with a <script> tag:

2. Set Map Properties

Create a function to initialize the map:

function initialize() {
}

In the initialize function, create an object (mapProp) to define the properties for the map:

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

The center property specifies where to center the map. Create a LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude.
The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.
The mapTypeId property specifies the map type to display. The following map types are supported:

ROADMAP (normal, default 2D map)
SATELLITE (photographic map)
HYBRID (photographic map + roads and city names)
TERRAIN (map with mountains, rivers, etc.)

3. Create a Map Container

Create a <div> element to hold the map.
Use CSS to size the element:

4. Create a Map Object

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

The code above creates a new map inside the <div> element with id="googleMap", using the parameters that are passed (mapProp).

5. Add an Event Listener to Load the Map

Add a DOM listener that will execute the initialize() function on window load (when the page is loaded):

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

Redsuncube

Discuss about Google Maps Basic

Explanation:

1. Load the Google API

2. Set Map Properties

3. Create a Map Container

4. Create a Map Object

5. Add an Event Listener to Load the Map

No comments:

Post a Comment

Javascript

Reactjs