Add google map to your web site
To add google map i hope you have both the api key and longitude and latitude with you if don't have kindly first read the following tutuorial
Api and Direction
Steps for adding google map
1. Place your API key at the end of following script tag which says "your_key " in the head section.
<script src="https://maps.googleapis.com/maps/api/js?key=
YOUR_KEY&callback"></script>
2. Now add the following google map api code in your head tag and add your longitude and latitude at the place it says longitude and latitude.
<script>
function myMap() {
var mapProperties= {
center:new google.maps.LatLng(longitude,latitude),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
3. Now add a div tag in your body section where you want to display google map and define its various attributes like how much with or height of google maps do you need make sure your div tag have google map unique id as follows.
<div id="googleMap" style="width:100%;height:400px;"></div>
For better understanding you can copy and paste following code for experiment purpose
<html>
<body>
<h4>google maps</h4>
<div id="goMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProperties= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY"></script>
</body>
</html>
What the thing you can customize in google maps
* Zoom level : In the api script you can change values which helps users to zoom the map .
* The marker of location : the marker of location can be changed or you can use a pic or png instead by adding the follwing script in the existing script
var marker = new google.maps.Marker({
position: myCenter,
icon: "redball.png"
});
marker.setMap(map);
* MapType : Provide your users a option to toggle between the map views i.e satellite view or road view
* Rotate : Provide your users a small icon by using this icon user can rotate the google maps.
* For enabling these controls you can add the following code in top of your script
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
* If you want to disable all these features to your user you can disable them by adding the following code to your script.
var mapOptions {disableDefaultUI: true}
This comment has been removed by the author.
ReplyDeleteThe code is not working!
ReplyDelete