Adding Google Map on Your Website within 5 Minutes

Google Map is the widely used element for a website and you can easily add Google Map to your website. We’ll show you the process to adding Google Map with a marker in your website. We’ll use the Google Maps API for displaying the map of your desired location. Also, we’ll add a direction link on the map for allowing users to get the direction.


At first, you need to get the latitude and longitude of your desired location. Follow the below steps to get the latitude & longitude from the Google Map.

  • Go to the Google Maps website.
  • Enter your center location and search.
  • Mark the exact location on Google Map.
  • A marker would appear on your marked place and also a dialog box would appear at the bottom of the map.
  • In this dialog box, you’ll see the details address, latitude, and longitude.
  • Collect the latitude and longitude from the bottom of the dialog box.

Place the following code into your web page HTML where you need to include the Google Map.

In this JavaScript code, you only need to insert your location’s latitude and longitude into the LatLng() method.

<script src=""></script>
var myCenter = new google.maps.LatLng(37.422230, -122.084058);
function initialize(){
    var mapProp = {

    var map = new google.maps.Map(document.getElementById("map"),mapProp);

    var marker = new google.maps.Marker({

google.maps.event.addDomListener(window, 'load', initialize);

You need mainly the <div id="map"></div> HTML. Another HTML will use to display the direction link.

<div class="mapContainer">
    <a itemprop="url" class="direction-link" target="_blank" href="//;daddr=37.422230,-122.084058&amp;hl=en"> Get Directions</a>
    <div id="map"></div>


#map {width: 100%;height: 400px;}
.mapContainer{width:50%;position: relative;}
.mapContainer a.direction-link {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100010;
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    line-height: 25px;
    padding: 8px 20px 8px 50px;
    background: #0094de;
    background-image: url('direction-icon.png');
    background-position: left center;
    background-repeat: no-repeat;
.mapContainer a.direction-link:hover {
    text-decoration: none;
    background: #0072ab;
    color: #FFF;
    background-image: url('direction-icon.png');
    background-position: left center;
    background-repeat: no-repeat;

That’s enough! Once you put all code together in your web page, you’ll see the Google Map like the below.


Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Recommended Tutorials For You

Leave a reply