First create an HTML DOC type:
<!DOCTYPE html>
Then create a script that connects to the google API
note: API stands for Application Programming Interface :
<script src="http://maps.googleapis.com/maps/api/js"></script>
The next step is to create a javascript function, then declare a variable in the function and give it any name of your choice, in the case i used "map1" after creating the function i set the latitude and longitude in my variable
<script>
function initialize() {
var map1 = {
center:new google.maps.LatLng(53.508742,-0.129950),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
note: I defined the map type as "ROADMAP" in my MapTypeId ,
the next step below is to create a new variable using the "new" keyword to connect to my google map and also using the document method to call the map function created :
var map=new google.maps.Map(document.getElementById("googleMap"),map1);
}
here my javascript event load up and initialise the map into the web browser
google.maps.event.addDomListener(window, 'load', initialize);
here i used the html "div" element to show the area the map would occupy on the web page
<div id="googleMap" style="width:500px;height:380px;"></div>
Here is the full code for the map to display on the web page :
<!DOCTYPE html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var map1 = {
center:new google.maps.LatLng(53.508742,-0.129950),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),map1);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
note : You need to have a fundamental knowledge of html javascript to be able to understand the codes written above
For more information you can contact the author.
Read More »
<!DOCTYPE html>
Then create a script that connects to the google API
note: API stands for Application Programming Interface :
<script src="http://maps.googleapis.com/maps/api/js"></script>
The next step is to create a javascript function, then declare a variable in the function and give it any name of your choice, in the case i used "map1" after creating the function i set the latitude and longitude in my variable
<script>
function initialize() {
var map1 = {
center:new google.maps.LatLng(53.508742,-0.129950),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
note: I defined the map type as "ROADMAP" in my MapTypeId ,
the next step below is to create a new variable using the "new" keyword to connect to my google map and also using the document method to call the map function created :
var map=new google.maps.Map(document.getElementById("googleMap"),map1);
}
here my javascript event load up and initialise the map into the web browser
google.maps.event.addDomListener(window, 'load', initialize);
here i used the html "div" element to show the area the map would occupy on the web page
<div id="googleMap" style="width:500px;height:380px;"></div>
Here is the full code for the map to display on the web page :
<!DOCTYPE html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var map1 = {
center:new google.maps.LatLng(53.508742,-0.129950),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),map1);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
note : You need to have a fundamental knowledge of html javascript to be able to understand the codes written above
For more information you can contact the author.
