Estimated reading time: 2 minutes

Add google map to your website by using JavaScript

Today we talk about how to add google map to your website by google map ABI and JavaScript.

We need to using google map in our website to fine our location on map to be easier and faster in reaching.

When we have some services and we need to marketing them, google map helps your coustomer to arrive to your location easily.

Companies, stores, business, etc depend on these technology in their business plans.

Important note:

Google map ABI is burtchase so that if you need it, you would subscribe in google services developers.

We have an example on these technology and we use html and JavaScript:

Html code:

<!!div class=”map”></div>

Google map abi:

src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCcRgTWO9RZnunH9bTqxNOHMH6rNCtbuzY&callback=initMap

JavaScript code:

 

// Initialize and add the map

function initMap() {

// The location of Cairo

var cairo = {lat: 30.044420, lng: 31.235712};

// The map, centered at Cairo

var map = new google.maps.Map(

document.querySelector(“.map”), {zoom: 4, center: cairo});

// The marker, positioned at Cairo

var marker = new google.maps.Marker({position: cairo, map: map});

}

Complete code:

<!div class=”map”></div>

 

<!– Google Map –>

<!script defer

src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCcRgTWO9RZnunH9bTqxNOHMH6rNCtbuzY&callback=initMap”>

</script>

<!script>

// Initialize and add the map

function initMap() {

// The location of Cairo

var cairo = {lat: 30.044420, lng: 31.235712};

// The map, centered at Cairo

var map = new google.maps.Map(

document.querySelector(“.map”), {zoom: 4, center: cairo});

// The marker, positioned at Cairo

var marker = new google.maps.Marker({position: cairo, map: map});

}

</script>

 

So thank you and see you in next article