How to Use Google Maps For Your Own Business
Posted in google maps
No comments:
Friday, August 28, 2015
Now a days google maps is playing major role in all industries like searching Historical places,Hospital,Schools,Directions from one location to another location etc.
many of the companies are using google maps to track their vehicles like in courier tracking,transport vehicle tracking,many transportation companies like Uber,Ola etc.
How they are using google maps into their own applications.
Here i am going to explain in detail how to use google maps in our own applications without any others help by basic knowledge on HTML5,CSS,Javascript.
To implement this feature in our applications google is providing API for free of cost for us.we can use those API and implement.To start learning this we need to follow the basic steps.
Step 1:
First we need to create one HTML5 page.To create this page you need to open Note Pad and write <!DOCTYP html>.
Step 2:
Now we need use the API which is provided by the Google in head Tag.
<head>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</head>
Step 3:
To Show or Hold the map on html page you have to create one div tag with an id. then you have to set the height and width of the map.
<div id="jtcmap" width="500px" height="500px">
Step 4:
After you have to assign the map to div id tag to show on html page.
This is full code and like Example For Simple Google Maps:
<!DOCTYPE html>
<html>
<head>
<title>Java T Cup Map</title>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<style>
#jtcmap{
height:500px;
width:500px;
}
</style>
</head>
<body>
<div id="jtcmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('jtcmap'), {
center: {lat:12.9667,lng:77.5667},
zoom: 8
});
}
</script>
</body>
</html>
Result:
<html>
<head>
<title>Java T Cup Map</title>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<style>
#jtcmap{
height:500px;
width:500px;
}
</style>
</head>
<body>
<div id="jtcmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('jtcmap'), {
center: {lat:12.9667,lng:77.5667},
zoom: 8
});
}
</script>
</body>
</html>
Result:
Related posts
Share this post
0 comments: