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.

adding-google-map-on-your-website-within-5-minutes-by-codexworld

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.
    google-map-enter-location-and-search-by-codexworld
  • Mark the exact location on Google Map.
    mark-exact-location-google-map-by-codexworld
  • 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.
    google-map-dialog-box-address-latitude-longitude-by-codexworld
  • Collect the latitude and longitude from the bottom of the dialog box.
    google-map-address-latitude-longitude-by-codexworld

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(37.422230, -122.084058);
function initialize(){
    var mapProp = {
        center:myCenter,
        zoom:12,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };

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

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

    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

HTML:
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="//maps.google.com/maps?f=d&amp;daddr=37.422230,-122.084058&amp;hl=en"> Get Directions</a>
    <div id="map"></div>
</div>

CSS:

#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.

google-map-location-marker-direction-link-by-codexworld

Leave a reply

Connect With CodexWorld