TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

HTML Google Maps

HTML Google Maps or HTML 5 Tutorial for beginners and professionals with tags, elements, tables, forms, anchor, image, heading, marquee, textarea, div, audio, video, header, footer etc.

<< Back to HTML

HTML Google Maps

HTML Google Map is used to display maps on your webpage. You can simply add a map on your basic HTML page.

Syntax:

<!DOCTYPE html>
<html>
<body>
<h1>First Google Map Example</h1>
<div id="map">My map will go here...</div>
</body>
</html>

Set the Map Size

You can set the map size by using the following syntax:

<div id="map" style="width:400px;height:400px;background:grey"></div>

How to create a function to set the map properties?

You can set the map properties by creating a function. Here, the function is myMap(). This example shows the Google map centered in London, England.

We have to use the functionalities of Google Maps API provided by a JavaScript library located at Google. Use the following script to refer to the Google Maps API with a callback to the myMap function.

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> 

Example:

<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px;background:grey"></div>
<script>
function myMap() {
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>
Test it Now

Example Explanation

mapOptions: It is a variable which defines the properties for the map.

center: It specifies where to center the map (using latitude and longitude coordinates).

zoom: It specifies the zoom level for the map (try to experiment with the zoom level).

mapTypeId: It specifies the map type to display. The following map types are supported: ROADMAP, SATELLITE, HYBRID, and TERRAIN.

var map=new google.maps.Map(document.getElementById("map"), mapOptions): It creates a new map inside the

element with id="map", using the parameters that are passed (mapOptions).

HTML Multiple Maps

You can use different map types in a single example.

Example:

<!DOCTYPE html>
<html>
<body>
<div id="googleMap1" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
<script>
function myMap() {
  var mapOptions1 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var mapOptions2 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var mapOptions3 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var mapOptions4 = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:9,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map1 = new google.maps.Map(document.getElementById("googleMap1"),mapOptions1);
  var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapOptions2);
  var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapOptions3);
  var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapOptions4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>
Test it Now
Next TopicHTML5 Semantics




Related Links:


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf