Build Malaysia Map Store Locator using TM ONE SmartMap

Build Malaysia Map Store Locator using TM ONE SmartMap

7 March 2022
Nowadays store locator on map is important for your visitors to easily locate or go to your store, office, or outlets. Knowing these needs, TM ONE offers SmartMap store locator where you can easily embed it into your website.

Store locator on map has been popularized thanks to Google Map.

How To Build Store Locator using SmartMap Portal

To use SmartMap you must first do a simple registration to get you API Key. After the registration you can include the JavaScript below into your website.
<!DOCTYPE html>
<html lang="en">  
    <meta charset="UTF-8" />  
    <title>TM One Leaflet Map Example</title>  
    <link rel="stylesheet" href=""  
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>  
    <script src=""  
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>  
    <link rel="stylesheet" href=""  
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"/>  
        #mapid {  
          height: 400px;  
          width: 600px;  
          position: absolute;  
          z-index: -1;  
    <div id="mapid"></div>  
    <script type="text/javascript">  

    const myMap ='mapid', {  
    zoom: 12,  
    center: [3.11617494, 101.66576184],  
    myMap.attributionControl.setPrefix('TM SmartMap © 2021 Telekom Malaysia')  

    api_key: "YOUR_API_KEY",  
    request: "GetTile",  
    layer: "Malaysia:TMOneSmartMap",  
    format: "image/png",  

    L.marker([3.11617494, 101.66576184])  
        .bindPopup('<b>Menara TM</b><br />3.11617494, 101.66576184.')  
    L.marker([3.13192804, 101.62997424])  
        .bindPopup('<b>Menara TM One</b><br />3.13192804, 101.62997424.')  

Customize Drop Pin Design

SmartMap allows you to change your drop pin icon design and colors. You also can add additional text to your drop pin.

More icons can be found at

To use the AwesomeMarkers, add the following line inside <head> section.
    <link rel="stylesheet" href=""/> 
        <script src="">
     L.marker([3.11617494, 101.66576184], { 
        icon: L.AwesomeMarkers.icon({ 
             icon: "coffee", 
             prefix: "fa", 
             markerColor: "red" 

     L.marker([3.13192804, 101.62997424], { 
        icon: L.AwesomeMarkers.icon({ 
             icon: "shopping-bag", 
             prefix: "fa", 
             markerColor: "blue"

Besides, you can add text at the marker as below.

L.marker([3.11617494, 101.66576184])
     .bindPopup('<b>Menara TM</b><br />3.11617494, 101.66576184.')

See how TM One website using SmartMap to show it TM ONE Office across Malaysia

Further Information:

You can refer to our documentation page for further information at or you may contact our friendly support team at .