If you have a commerce website that needs to show the store locations, Google Maps is the best tool to use and its free too.
You may need to follow few steps first to get a key to use for your code.
Click Here to get the key.
Create a project and get a key. Keep it saved because it's what you are going to use.
You can always use the documentation here.
Basically you can show a static location as below;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
This is a sample you can follow as per Google Map Documentation. But What if we need more. Different locations, and more dynamics.
It will be our next post. So, wait for it. :)
Happy Coding...!
No comments:
Post a Comment