JavaScript google map API example.

How to Use Google Maps API in JavaScript?

View Answers

May 24, 2012 at 6:52 PM

Google Maps- A map is a way of representation of your route, location and many more things. As railway maps contain all railway routes, a road map shows you road, street information. In the same way google map works but in your desktop, laptop, mobile etc. It is web-based service. Google maps is a service, provided by Google.It is very powerful and user-friendly web mapping technology, which is used in different mapping field. It supplies Application Programming Interface (API) and navigational tool for street map, business location, route planner etc.

Google Maps API- Google Maps API is very useful in integrating Google Maps into websites. Google launched it in june2005. It is free service and can be used on any website by developer. Initially Google introduced JavaScript maps API.Here is one example-

<html>
<head>
<title>Google Maps API - Map Type</title>
<style type="text/css">
div#map {
    width: 100%;
    height: 1000px;
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function loadGoogleMap() {
        var latlng = new google.maps.LatLng(28.70386, 77.11423);
        var mapOptions = {
            zoom : 13,
            center : latlng,
            mapTypeId : google.maps.MapTypeId.HYBRID,
            mapTypeControlOptions : {
                style : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position : google.maps.ControlPosition.TOP_CENTER
            }
        };
        var map = new google.maps.Map(document.getElementById("map "),
                mapOptions);

        var marker = new google.maps.Marker( {
            position : latlng,
            map : map,
            title : "Roseindia Office!"
        });
}
</script>
</head>
<body onload="loadGoogleMap()">
<div id="map "></div>
</body>

</html>

Description: - This example loads the google map with defined latitude and longitude. src=http://maps.googleapis.com/maps/api/js?sensor=false this is google maps api ,including as JavaScript source. Here loadGoogleMap() is a function that is called on body load. latlng is variable and we are assigning new google.maps.LatLng(28.70386, 77.11423) that is some latitude and longitude value. It locates some specific location according to its value. Variable mapOptions holds all map type controls. MapTypeId. HYBRID holds map type HYBRID that shows a transparent layer of major streets on satellite images. Position and style is properties of mapTypeControlOptions. Marker defines the location you want to mark.