Added Map to promosteem.com website

based on directions from the promosteem community leader, @arie.steem. he asked me to add a map showing the names of community members based on their origin

I made this using Google Maps API

I made this all using Maps API from google. actually many other API providers besides google. However, for now google is number one in this section. so therefore I chose to use the API from google.

I'm just trying to add some community members based on their country for the experiment. For completeness, we will add more later.

Proof of Work

https://github.com/sogatanco/steemsg/commits/master

Can we get the code from this application?

Of course, because this application is an open source application. so anyone can see it. I accidentally uploaded this app on my github. you can see at this link: https://github.com/sogatanco/steemsg

import React from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
import '../App.css';

 
class Maps extends React.Component{
     render(){

         return(
             <div className="tes">
                  <Map className="map"
                google={this.props.google}
                zoom={3}
                
                initialCenter={{ lat: 4.635481, lng: 96.896346 }}>
                    <Marker position={{ lat: 5.145732, lng: 97.144462 }}  label="@ponpase"/>
                    <Marker position={{ lat: 5.117384, lng:97.210470}}  label="@arie.steem"/>
                    <Marker position={{ lat: 5.117384, lng:97.210470}}  label="@pojan"/>
                    <Marker position={{ lat: 8.154480, lng:-1.128527}}  label="@mcsamm"/>
                    <Marker position={{ lat: 29.414012, lng:69.089543}}  label="@cryptokraze"/>
                    <Marker position={{ lat: 3.139874, lng:101.668448}}  label="@talktofaith"/>
                    <Marker position={{ lat: 15.199774, lng:107.984233}}  label="@oscarcc99"/>
                </Map>
             </div>
      
         )
     }
}


export default GoogleApiWrapper({
    apiKey: 'GOOGLE API KEY'
  })(Maps);

LIVE DEMO

please try it, if there are shortcomings and irregularities we really welcome suggestions from all of you. please write in the comments column below.

Thanks to : steemcurator01, @stephenkendal, @pennsif